Векторные иконки в меню

1647
Всем привет.Столкнулся с проблемой добавления векторных иконок в динамическое меню.Система 1.10.6. И вот, что намудрил. Возможно есть более красивое решение, но по поиску "векторные иконки" на форуме ничего не выдало. И сильно копаться в кодах меню как то сложновато для меня. Итак решение.

Скачиваем и добавляем на сайт сами иконки. Я использовал icomoon. В файле ../mod_menu.tpl заменяем это
Код PHP:
  1. <span>
  2. {if $item.iconurl}<img src="/images/menuicons/{$item.iconurl}" alt="{$item.title|escape:'html'}" />{/if}
  3. {$item.title}
  4. </span>
на это
Код PHP:
  1.  
  2. {if $item.iconurl}<span class="icon-{$item.iconurl}"></span>{/if}
  3. {$item.title}
  4.  
Данная конструкция <span class="icon-{$item.iconurl}"></span> будет зависить от того, какие используете иконки.
Теперь идём в файл admin/applets/menu.php и в самом начале это
Код PHP:
  1. if ($handle = opendir(PATH.'/images/menuicons')) {
  2. $n = 0;
  3. while (false !== ($file = readdir($handle))) {
  4. if ($file != '.' && $file != '..' && mb_strstr($file, '.gif')){
  5. $tag = str_replace('.gif', '', $file);
  6. $dir = '/images/menuicons/';
  7. echo '<a style="width:20px;height:20px;display:block; float:left; padding:2px" href="javascript:selectIcon(\''.$file.'\')"><img alt="'.$file.'"src="'.$dir.$file.'" border="0" /></a>';
  8. $n++;
  9. }
  10. }
  11. closedir($handle);
  12. }
меняем на это
Код PHP:
  1. if ($handle = opendir(PATH.'/images/menuicons')) {
  2. $n = 0;
  3. while (false !== ($file = readdir($handle))) {
  4.  
  5. //$tag = str_replace('.gif', '', $file);
  6. $dir = '/images/menuicons/';
  7. $file = mb_substr($file, 0, mb_strrpos($file, '.'));
  8. echo '<a style="width:60px;height:20px;display:block; float:left; padding:2px" href="javascript:selectIcon(\''.$file.'\')">'.$file.'</a>';
  9. $n++;
  10.  
  11. }
  12. closedir($handle);
  13. }
Теперь у нас при попытке вставить иконку к пункту меню в админке мы увидим вместо иконок только их имена без расширения.
""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.
Ну, а далее идем в папку с системными иконками /images/menuicons и переименовываем столько любых иконок сколько нужно на название векторных, которые прописаны в стилях.Например есть
.icon-image:before {
content: "\e601";
}
соответственно переименовываем на image.На этом всё. Дописываем нужные стили и наслаждаемся.У меня вышло так
""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.
история комментариев на аякс | Для любителя "nofollow"
Комментарии (2)
eoleg 19 сентября 2015 в 14:29 0
Красотища то какая! smile
Lora 19 сентября 2015 в 15:27 +1
Спасибо.