Векторные иконки в меню - продолжение

1878
Продолжение записи Lora
Используем иконочные шрифты для стилизации меню, не правим файлы вне шаблона.

Часть первая - используем те же иконки что и Lora (IcoMoon)
1.Скопировать содержимое архива на сайт.
2.В админке нужному модулю назначить шаблон вывода mod_menu_icon.tpl

3.Нужным пунктам меню присвоить класс для иконки (берём из demo.css). Пример: в demo.css класс выглядит так:
Код PHP:
  1.  
  2. .icon-image:before {
  3. content: "\e90d";
  4. }
  5.  
Копируем из всего этого только "image", это и есть наш класс :

и назначаем класс:

Результат:

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
Часть вторая - Font Awesome (готовимся встречать 1.10.7 laugh )
Тут даже проще (не нужно привязываться к тегу <span>)
Порядок действий тот же, только в:
п2. mod_menu_ico.tpl
п3. Подсматриваем нужный класс в font-awesome.css. Пример: в font-awesome.css класс выглядит так:
Код PHP:
  1.  
  2. .fa-signal:before {
  3. content: "\f012";
  4. }
Копируем из всего этого только "signal"
В этом варианте оставил возможность использования в одном меню и шрифта и иконок по умолчанию.
На приведённом ниже рисунке, новости - с шрифтовой иконкой, статьи - с gif-картинкой, а фото - с обеими сразу shock

Архив второго варианта
Важно: делалось любителем. используете на свой страх и риск!
Мира вам!
Вкладка профиля - записи в каталоге для 1.10.6 (плагин) | Шаблон light-news 2.2.1 - 2.5.1
Комментарии (12)
Lora 19 сентября 2015 в 18:49 +3
small user social cms
Всё великое в простом. smile Нужно было мне внимательней смотреть в админку. Респект.
Владимир Савенко 19 сентября 2015 в 19:13 0
small user social cms
У каждого свой путь к одной цели v
Майкл 19 сентября 2015 в 19:49 0
small user social cms
Не совсем понял какая картинка появится вставляя в класс paint-format, images или droplet ?
Олег Васильевич я 20 сентября 2015 в 10:45 0
small user social cms
Майкл, извините, не понял вопроса.
Майкл 20 сентября 2015 в 20:37 0
small user social cms
В архиве самих иконок нет... scratch
а в файле demo.css ссылок на картинки масса, а картинок нет....
Олег Васильевич я 20 сентября 2015 в 20:58 0
small user social cms
В архиве самих иконок нет...
И не должно быть, - там шрифт с иконками.
а в файле demo.css ссылок на картинки масса
Покажите хоть одну! shock
Майкл 20 сентября 2015 в 21:06 0
small user social cms
Ясно, сам ещё не ставил поэтому не понял как определить какая иконка появится при использовании выбранного класса?
Олег Васильевич я 20 сентября 2015 в 21:47 0
small user social cms
Загрузите у разработчиков демку или смотрите у них сайте
Hmelex 21 сентября 2015 в 17:01 0
small user social cms
А для ВТОРОЙ версии, можно что то подобное сделать?
Или как просто добавить картинки к пунктам меню?
Олег Васильевич я 21 сентября 2015 в 18:52 0
small user social cms
Можно.
Удобнее через класс (в админке можно каждому пункту назначить).
Hmelex 21 сентября 2015 в 19:06 0
small user social cms
Дла класс то прописывается но при подведении мышки накладывается другой класс - и закрывает картинку.
Тоже самое и при активном разделе - картинка не видна sad crazy
Олег Васильевич я 21 сентября 2015 в 20:04 0
small user social cms
Есть глобальное предположение, что что-то не так пишете laugh