Векторные иконки в меню 2 215 просмотров

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

Скачиваем и добавляем на сайт сами иконки. Я использовал icomoon. В файле ../mod_menu.tpl заменяем это

                    <span>
                        {if $item.iconurl}<img src="/images/menuicons/{$item.iconurl}" alt="{$item.title|escape:'html'}" />{/if}
                        {$item.title}
                    </span>

на это

 
                        {if $item.iconurl}<span class="icon-{$item.iconurl}"></span>{/if}
                        {$item.title}

Данная конструкция <span class="icon-{$item.iconurl}"></span> будет зависить от того, какие используете иконки.
Теперь идём в файл admin/applets/menu.php и в самом начале это

	if ($handle = opendir(PATH.'/images/menuicons')) {
		$n = 0;
		while (false !== ($file = readdir($handle))) {
			if ($file != '.' && $file != '..' && mb_strstr($file, '.gif')){
				$tag = str_replace('.gif', '', $file);
				$dir = '/images/menuicons/';
				echo '<a style="width:20px;height:20px;display:block; float:left; padding:2px" href="javascript:selectIcon(\''.$file.'\')"><img alt="'.$file.'"src="'.$dir.$file.'"  /></a>';
 				$n++;
			}
		}
		closedir($handle);
	}

меняем на это

	if ($handle = opendir(PATH.'/images/menuicons')) {
		$n = 0;
		while (false !== ($file = readdir($handle))) {
 
				//$tag = str_replace('.gif', '', $file);
				$dir = '/images/menuicons/';
				$file  = mb_substr($file, 0, mb_strrpos($file, '.'));
				echo '<a style="width:60px;height:20px;display:block; float:left; padding:2px" href="javascript:selectIcon(\''.$file.'\')">'.$file.'</a>';
 				$n++;
 
		}
		closedir($handle);
	}

Теперь у нас при попытке вставить иконку к пункту меню в админке мы увидим вместо иконок только их имена без расширения.
Ну, а далее идем в папку с системными иконками /images/menuicons и переименовываем столько любых иконок сколько нужно на название векторных, которые прописаны в стилях.Например есть
.icon-image:before {
content: "\e601";
}
соответственно переименовываем на image.На этом всё. Дописываем нужные стили и наслаждаемся.У меня вышло так