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

 
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 1862
Сабж. Кто применял? Как можно их туда (заголовки меню имею ввиду) внедрить вместо текста?
Редактировалось: 1 раз (Последний: 23 февраля 2016 в 23:32)
Дополнения для InstantCMS
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2928
kreator, я с Awesome Font не разбирался, но делал обычными картинками. При создании пункта есть настройка "Класс CSS" - вот с помощью этого думаю можно и Awesome Font выводить при подключении...
Реклама
cms
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 1862
А как на css вместо текста названия пункта меню вставить символ: "\f007"?
Или как вариант как разрешить использование html в заголовках пункта меню?
Дополнения для InstantCMS
Посетитель
small user social cms
Медаль
Сообщений: 191
я списывал отсюда zst
Редактировалось: 1 раз (Последний: 24 февраля 2016 в 03:11)
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2928
kreator:
А как на css вместо текста названия пункта меню вставить символ: "\f007"?

content: "\f007";

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

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

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

Тут есть полезная инфа: http://fontawesome.ru/
Редактировалось: 2 раз (Последний: 24 февраля 2016 в 08:34)
Посетитель
small user social cms
Медаль
Сообщений: 191
может это и простое решение - я сделал по-нубски:
1. причитал и сделал по алгоритму отсюда (my-instantcms.ru)
2. затем подсмотрел код элемента в theme-gui.css стр. 82-136 здесь
В общем то несложно, тот же порядок применения стилей, что и с картинками.

Скромное предложение для разработчиков шаблонов, дабы не парится что есть "\f090"?, унифицировать название стилей, которые указываются в админке, например: строка
Код PHP:
  1. .menu .стиль.item:before { content: "\f090"; }
применять имя "faстиль" или "fa_стиль", в соответствии с названиями иконок awesome, а не key или profile b т.д.
Редактировалось: 1 раз (Последний: 24 февраля 2016 в 09:35)
Посетитель
small user social cms
Медаль
Сообщений: 191
Упс! совсем забыл сказать СПАСИБО авторам у которых подглядывал и списывал zst
p.s. надеюсь я не сделал чего то нехорошего....
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1164
Если ВМЕСТО текста то достаточно подключить шрифт:
Спойлер
И вместо текста вставлять код для нужной иконки, например
Код HTML:
  1. <i class="fa fa-beer"></i>
Иконки выбираем здесь
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 3609
Val, спасибо думаю это самый верный путь
Дизайн для Инстант = Я зарабатываю тут =
= Уроки для Конструктора тем =
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 1862
Val:
Если ВМЕСТО текста
Val:
вставлять код
то выводится
Код PHP:
  1. <i class="fa fa-beer"></i>
так и выводится
Дополнения для InstantCMS
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2928
Val:
И вместо текста вставлять код для нужной иконки, например

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

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

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

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

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

Код PHP:
  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>
Редактировалось: 3 раз (Последний: 24 февраля 2016 в 14:46)
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2928
Только что попробовал - все пашет как описал!

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

Этот блок :

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

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

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

Ну а по нормальному, нужно написать свой файл шаблона менюшки с своими личными стилями...
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2928
Там еще все проще)
возможно тег <i> для чего то там и нужен, но работает и без него)

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

Но так как шаблон менюшки все равно нужно доперепиливать, то это не важно, лучше сделать так как надо, как описано в документации...
Посетитель
no avatar
Сообщений: 10
По FontAwesome, как вариант можно еще так:

Код PHP:
  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 прописать стиль:

Иконка слева
Код 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.  
Иконка справа
Код CSS:
  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 это:

Код CSS:
  1.  
  2. a.item51 span.wrap {
  3. display: none;
  4. }
  5.  
Вообще вариантов масса, что использовать лучше, решать вам.
Редактировалось: 3 раз (Последний: 24 февраля 2016 в 17:05)
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 394
Вообще хорошо бы предоставить пользовательский интерфейс вроде попапа с выбором иконки. На досуге посмотрю, как бы можно сделать получше. Вручную забивать html - ну не дело, а препендить на jquery из разряда извращений.
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.