Или как вариант как разрешить использование html в заголовках пункта меню?
А как на css вместо текста названия пункта меню вставить символ: "\f007"?
content: "\f007";
ps: хотя как то вопрос кажется немного не правильным)
… при подключении Awesome Font, символы заранее заданы и имеют "идентификаторы"(class="fa fa-bla-bla")
Вот этот "идентификатор"(fa fa-bla-bla) думаю можно указывать при создании пунктов (
Посмотрел — доработка потребуется, по документации нужен тег <i>
Тут есть полезная инфа: fontawesome.ru/
1. причитал и сделал по алгоритму отсюда (my-instantcms.ru)
2. затем подсмотрел код элемента в theme-gui.css стр. 82-136 здесь
В общем то несложно, тот же порядок применения стилей, что и с картинками.
Скромное предложение для разработчиков шаблонов, дабы не парится что есть "\f090"?, унифицировать название стилей, которые указываются в админке, например: строка
.menu .стиль.item:before { content: "\f090"; }
p.s. надеюсь я не сделал чего то нехорошего…
В теге <head> вашего html, укажите путь до font-awesome.min.css.
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<i class="fa fa-beer"></i>
Если ВМЕСТО текста
то выводитсявставлять код
<i class="fa fa-beer"></i>
И вместо текста вставлять код для нужной иконки, например
Идея хорошая, но текст есть текст —
ps: Только что проверил на 2.4.1 полумесячной давности — при попытке ввода тегов выводи ошибку — так что так вообще низя)
… проще подшаманить с шаблоном менюшки
в менюшке есть такая строка:
ps: файл менюшки лежит тут: \templates\default\assets\ui\menu.tpl.php
Желательно сам файл не менять а создать новый на основе данного, допустим с именем аwesomemenu.tpl.php
Далее в настройках видждетов находим главное меню — заходим в настройки — опции и изменяем "Шаблон списка меню" на созданный "аwesomemenu.tpl.php"
pss: после этого в админке менюшек, задавая пунктам "Класс CSS" — он будет применяться и к добавленному тегу <i>
Файл стилей awesome (font-awesome.min.css) подключил прям в шаблоне менюшки
Этот блок:
и нужно стилизовать блок <i> в своем файле стилей…
Само текстовое название пункта меню можно скрыть с помощью стилей…
Ну а по нормальному, нужно написать свой файл шаблона менюшки с своими личными стилями…
возможно тег <i> для чего то там и нужен, но работает и без него)
т.е. если просто подключить стили Awesome Font и задать пункту нужный стиль, то иконка будет выводиться (останется только стилизовать ее)
Но так как шаблон менюшки все равно нужно доперепиливать, то это не важно, лучше сделать так как надо, как описано в документации…
<script> (function(jQuery){ jQuery(document).ready(function(){ jQuery('a.item51 > span').prepend('<i class="fa fa fa-home fa-lg "></i> '); // иконка меню с ID 51 }); })(jQuery); </script>
Но лучше использовать метод reload'a, все таки CSS. Да и опять же лучше под каждый виджет меню, использовать свой шаблон а не стандартный для всех.
Если нужно использовать графические иконки (например PNG). Также можно добавить к меню ID, а далее уже в CSS прописать стиль:
Иконка слева
a.item51:before { content: url('../images/myiconmenu.png'); display: block; width: 20px; height: 20px; float: left; margin: 2px 6px 0 0; }
a.item51:after { content: url('../images/myiconmenu.png'); display: block; width: 20px; height: 20px; float: right; margin: 4px 0 0 6px; }
И если нужно убрать текст, т.е. оставить только иконку без текста пункта меню, добавляем в CSS это:
a.item51 span.wrap { display: none; }