Сабж. Кто применял? Как можно их туда (заголовки меню имею ввиду) внедрить вместо текста?
#2
23 февраля 2016 в 23:40
kreator, я с Awesome Font не разбирался, но делал обычными картинками. При создании пункта есть настройка "Класс CSS" — вот с помощью этого думаю можно и Awesome Font выводить при подключении…
#3
24 февраля 2016 в 00:06
А как на css вместо текста названия пункта меню вставить символ: "\f007"?
Или как вариант как разрешить использование html в заголовках пункта меню?
Или как вариант как разрешить использование html в заголовках пункта меню?
Сегодня в 02:53
А как на 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"?, унифицировать название стилей, которые указываются в админке, например: строка
применять имя "faстиль" или "fa_стиль", в соответствии с названиями иконок awesome, а не key или profile b т.д.
1. причитал и сделал по алгоритму отсюда (my-instantcms.ru)
2. затем подсмотрел код элемента в theme-gui.css стр. 82-136 здесь
В общем то несложно, тот же порядок применения стилей, что и с картинками.
Скромное предложение для разработчиков шаблонов, дабы не парится что есть "\f090"?, унифицировать название стилей, которые указываются в админке, например: строка
.menu .стиль.item:before { content: "\f090"; }
#7
24 февраля 2016 в 09:30
Упс! совсем забыл сказать СПАСИБО авторам у которых подглядывал и списывал
p.s. надеюсь я не сделал чего то нехорошего…
p.s. надеюсь я не сделал чего то нехорошего…
#8
24 февраля 2016 в 09:37
Если ВМЕСТО текста то достаточно подключить шрифт:
И вместо текста вставлять код для нужной иконки, например
Иконки выбираем здесь
Скопируйте полностью папку font-awesome в папку вашего проекта.
В теге <head> вашего html, укажите путь до font-awesome.min.css.
В теге <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>
#9
24 февраля 2016 в 09:41
Val, спасибо думаю это самый верный путь
#10
24 февраля 2016 в 11:05
Если ВМЕСТО текста
то выводитсявставлять код
<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>
#12
24 февраля 2016 в 14:20
Только что попробовал — все пашет как описал!
Файл стилей awesome (font-awesome.min.css) подключил прям в шаблоне менюшки
Этот блок:
нужно вставить внутрь тега <а>, для проверки ставил перед закрыванием </a>
и нужно стилизовать блок <i> в своем файле стилей…
Само текстовое название пункта меню можно скрыть с помощью стилей…
Ну а по нормальному, нужно написать свой файл шаблона менюшки с своими личными стилями…
Файл стилей awesome (font-awesome.min.css) подключил прям в шаблоне менюшки
Этот блок:
и нужно стилизовать блок <i> в своем файле стилей…
Само текстовое название пункта меню можно скрыть с помощью стилей…
Ну а по нормальному, нужно написать свой файл шаблона менюшки с своими личными стилями…
#13
24 февраля 2016 в 14:39
Там еще все проще)
возможно тег <i> для чего то там и нужен, но работает и без него)
т.е. если просто подключить стили Awesome Font и задать пункту нужный стиль, то иконка будет выводиться (останется только стилизовать ее)
Но так как шаблон менюшки все равно нужно доперепиливать, то это не важно, лучше сделать так как надо, как описано в документации…
возможно тег <i> для чего то там и нужен, но работает и без него)
т.е. если просто подключить стили Awesome Font и задать пункту нужный стиль, то иконка будет выводиться (останется только стилизовать ее)
Но так как шаблон менюшки все равно нужно доперепиливать, то это не важно, лучше сделать так как надо, как описано в документации…
По FontAwesome, как вариант можно еще так:
Где item51, это ID пункта меню. В файле menu.tpl.php в класс ссылки добавьте после item'a, вывод ID пункта меню.
Но лучше использовать метод reload'a, все таки CSS. Да и опять же лучше под каждый виджет меню, использовать свой шаблон а не стандартный для всех.
Если нужно использовать графические иконки (например PNG). Также можно добавить к меню ID, а далее уже в CSS прописать стиль:
Иконка слева
Иконка справа
Соответственно здесь иконка 20x20px и имеет отступы. Тут уже правите по своему усмотрению, типу меню и размерам иконки.
И если нужно убрать текст, т.е. оставить только иконку без текста пункта меню, добавляем в CSS это:
Вообще вариантов масса, что использовать лучше, решать вам.
<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; }
#15
24 февраля 2016 в 19:04
Вообще хорошо бы предоставить пользовательский интерфейс вроде попапа с выбором иконки. На досуге посмотрю, как бы можно сделать получше. Вручную забивать html — ну не дело, а препендить на jquery из разряда извращений.