Иконки Awesome Font в меню (icms2+)

#1 23 февраля 2016 в 23:13
Сабж. Кто применял? Как можно их туда (заголовки меню имею ввиду) внедрить вместо текста?
#2 23 февраля 2016 в 23:40
kreator, я с Awesome Font не разбирался, но делал обычными картинками. При создании пункта есть настройка "Класс CSS" — вот с помощью этого думаю можно и Awesome Font выводить при подключении…
#3 24 февраля 2016 в 00:06
А как на css вместо текста названия пункта меню вставить символ: "\f007"?
Или как вариант как разрешить использование html в заголовках пункта меню?
#5 24 февраля 2016 в 08:20

А как на css вместо текста названия пункта меню вставить символ: "\f007"?

kreator

content: "\f007";

ps: хотя как то вопрос кажется немного не правильным)

… при подключении Awesome Font, символы заранее заданы и имеют "идентификаторы"(class="fa fa-bla-bla")

Вот этот "идентификатор"(fa fa-bla-bla) думаю можно указывать при создании пунктов (возможно потребуется доработка шаблона)
Посмотрел — доработка потребуется, по документации нужен тег <i>

Тут есть полезная инфа: fontawesome.ru/
#6 24 февраля 2016 в 09:24
может это и простое решение — я сделал по-нубски:
1. причитал и сделал по алгоритму отсюда (my-instantcms.ru)
2. затем подсмотрел код элемента в theme-gui.css стр. 82-136 здесь
В общем то несложно, тот же порядок применения стилей, что и с картинками.

Скромное предложение для разработчиков шаблонов, дабы не парится что есть "\f090"?, унифицировать название стилей, которые указываются в админке, например: строка
  1. .menu .стиль.item:before { content: "\f090"; }
применять имя "faстиль" или "fa_стиль", в соответствии с названиями иконок awesome, а не key или profile b т.д.
#7 24 февраля 2016 в 09:30
Упс! совсем забыл сказать СПАСИБО авторам у которых подглядывал и списывал zst
p.s. надеюсь я не сделал чего то нехорошего…
#8 24 февраля 2016 в 09:37
Если ВМЕСТО текста то достаточно подключить шрифт:
Скопируйте полностью папку font-awesome в папку вашего проекта.
В теге <head> вашего html, укажите путь до font-awesome.min.css.
  1. <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
И вместо текста вставлять код для нужной иконки, например
  1. <i class="fa fa-beer"></i>
Иконки выбираем здесь
#9 24 февраля 2016 в 09:41
Val, спасибо думаю это самый верный путь
#10 24 февраля 2016 в 11:05

Если ВМЕСТО текста

Val

вставлять код

Val
то выводится
  1. <i class="fa fa-beer"></i>
так и выводится
#11 24 февраля 2016 в 13:40

И вместо текста вставлять код для нужной иконки, например

Val

Идея хорошая, но текст есть текст — оно текстом и выведется)

ps: Только что проверил на 2.4.1 полумесячной давности — при попытке ввода тегов выводи ошибку — так что так вообще низя)

… проще подшаманить с шаблоном менюшки

в менюшке есть такая строка:

  1. <li <?php if ($css_classes) { ?>class="<?php echo implode(' ', $css_classes); ?>"<?php } ?>>
вот сразу после нее можно вставить блок для Awesome Font :

  1. <?php if ($css_classes) { ?><i class="<?php echo implode(' ', $css_classes); ?>"></i><?php } ?>
Плюс все это разукрасить стилями)

ps: файл менюшки лежит тут: \templates\default\assets\ui\menu.tpl.php

Желательно сам файл не менять а создать новый на основе данного, допустим с именем аwesomemenu.tpl.php

Далее в настройках видждетов находим главное меню — заходим в настройки — опции и изменяем "Шаблон списка меню" на созданный "аwesomemenu.tpl.php"

pss: после этого в админке менюшек, задавая пунктам "Класс CSS" — он будет применяться и к добавленному тегу <i>
#12 24 февраля 2016 в 14:20
Только что попробовал — все пашет как описал!

Файл стилей awesome (font-awesome.min.css) подключил прям в шаблоне менюшки

Этот блок:

  1. <?php if ($css_classes) { ?><i class="<?php echo implode(' ', $css_classes); ?>"></i><?php } ?>
нужно вставить внутрь тега <а>, для проверки ставил перед закрыванием </a>

и нужно стилизовать блок <i> в своем файле стилей…

Само текстовое название пункта меню можно скрыть с помощью стилей…

Ну а по нормальному, нужно написать свой файл шаблона менюшки с своими личными стилями…
#13 24 февраля 2016 в 14:39
Там еще все проще)
возможно тег <i> для чего то там и нужен, но работает и без него)

т.е. если просто подключить стили Awesome Font и задать пункту нужный стиль, то иконка будет выводиться (останется только стилизовать ее)

Но так как шаблон менюшки все равно нужно доперепиливать, то это не важно, лучше сделать так как надо, как описано в документации…
#14 24 февраля 2016 в 16:49
По FontAwesome, как вариант можно еще так:

  1.  
  2. <script>
  3. (function(jQuery){
  4. jQuery(document).ready(function(){
  5. jQuery('a.item51 > span').prepend('<i class="fa fa fa-home fa-lg "></i> '); // иконка меню с ID 51
  6. });
  7. })(jQuery);
  8. </script>
  9.  
Где item51, это ID пункта меню. В файле menu.tpl.php в класс ссылки добавьте после item'a, вывод ID пункта меню.

Но лучше использовать метод reload'a, все таки CSS. Да и опять же лучше под каждый виджет меню, использовать свой шаблон а не стандартный для всех.

Если нужно использовать графические иконки (например PNG). Также можно добавить к меню ID, а далее уже в CSS прописать стиль:

Иконка слева
  1.  
  2. a.item51:before {
  3. content: url('../images/myiconmenu.png');
  4. display: block;
  5. width: 20px;
  6. height: 20px;
  7. float: left;
  8. margin: 2px 6px 0 0;
  9. }
  10.  
Иконка справа
  1.  
  2. a.item51:after {
  3. content: url('../images/myiconmenu.png');
  4. display: block;
  5. width: 20px;
  6. height: 20px;
  7. float: right;
  8. margin: 4px 0 0 6px;
  9. }
  10.  
Соответственно здесь иконка 20x20px и имеет отступы. Тут уже правите по своему усмотрению, типу меню и размерам иконки.
И если нужно убрать текст, т.е. оставить только иконку без текста пункта меню, добавляем в CSS это:

  1.  
  2. a.item51 span.wrap {
  3. display: none;
  4. }
  5.  
Вообще вариантов масса, что использовать лучше, решать вам.
#15 24 февраля 2016 в 19:04
Вообще хорошо бы предоставить пользовательский интерфейс вроде попапа с выбором иконки. На досуге посмотрю, как бы можно сделать получше. Вручную забивать html — ну не дело, а препендить на jquery из разряда извращений.
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.