Иконки Awesome Font в меню [InstantCMS 2.4.0]

+39
6.75K
Пост навеян данной темой на форуме.
В теме было высказано много вариантов реализации, попробовал сделать для сообщества ещё один.

Иллюстрация
Иллюстрация
Иллюстрация
Демо


Инструкция.

1) Распакуйте этот архив в корень сайта. Если у Вас стоит не дефолтный шаблон, перед заливкой переименуйте папку default в архиве на название своего шаблона.

2) Откройте файл \icons\system\controllers\admin\forms\form_menu_item.php, найдите строку 64, замените
  1. 'type' => 'fieldset',
  2. 'title' => LANG_OPTIONS,
  3. 'childs' => array(
  4. new fieldString('options:class', array(
  5. 'title' => LANG_CSS_CLASS,
  6. ))
  7. )
  8. ),
на
  1. 'type' => 'fieldset',
  2. 'title' => LANG_OPTIONS,
  3. 'childs' => array(
  4. new fieldString('options:class', array(
  5. 'title' => LANG_CSS_CLASS,
  6. )),
  7. new fieldString('options:icon', array(
  8. 'title' => LANG_CSS_ICON,
  9. ))
  10. )
  11. ),
3) Откройте файл \system\languages\ru\language.php, в каком-то месте (например, на 48 строке), добавьте
  1. define('LANG_CSS_ICON', 'Иконка');
4) В head в \templates\(ваш шаблон)\main.tpl.php подключите стиль шрифта
  1. <?php $this->addMainCSS("templates/{$this->name}/css/font-awesome.min.css"); ?>
5) Откройте \templates\(ваш шаблон)\assets\ui\menu.tpl.php, на ~24 строке добавьте
  1. $menu_item_icon = isset($item['options']['icon']) ? '<i class="menu-icon '.$item['options']['icon'].'"></i> ' : '';
в этом же файле добавьте на ~44 строке (перед <span class="wrap">)
  1. <?php echo $menu_item_icon; ?>
6) Откройте \templates\(ваш шаблон)\js\core.js, в самом конце добавьте
  1.  
  2. $(window).on('load', function () {
  3. if ($('input#options_icon').length) {
  4. var input_option_icon = $('input#options_icon'),
  5. input_option_icon_choose_html,
  6. input_option_icon_preview,
  7. input_option_icon_html = function (icon) {
  8. return '<i class="' + icon + '"></i>';
  9. },
  10. check_input_option_icon_choose = function() {
  11. if (input_option_icon.val() != '') {
  12. return input_option_icon_choose_html = '<a href="javascript:void(0)" class="input_option_icon_preview"></a> <a href="javascript:void(0)" class="add">Изменить</a> или <a href="javascript:void(0)" class="remove">удалить</a>';
  13. } else {
  14. return input_option_icon_choose_html = '<a href="javascript:void(0)" class="add">Выбрать</a>';
  15. }
  16. };
  17. input_option_icon.hide();
  18. $('<div class="input_option_icon_choose">' + input_option_icon_choose_html + '</div>').insertAfter(input_option_icon);
  19. var input_option_icon_choose = $('.input_option_icon_choose');
  20. input_option_icon_choose.html(check_input_option_icon_choose());
  21. $('.input_option_icon_preview').html(input_option_icon_html(input_option_icon.val()));
  22. $(document).on('click', '.input_option_icon_choose .add', function(){
  23. $.nmManual('/templates/default/icons.html');
  24. input_option_icon.change();
  25. });
  26. $(document).on('click', '#icons section a', function() {
  27. input_option_icon.val($(this).children().attr('class'));
  28. input_option_icon.change();
  29. $.nmTop().close();
  30. });
  31. $(document).on('click', '.input_option_icon_choose .remove', function(){
  32. input_option_icon.val('');
  33. input_option_icon.change();
  34. });
  35. $(document).on('change', input_option_icon, function () {
  36. input_option_icon_choose.html(check_input_option_icon_choose());
  37. $('.input_option_icon_preview').html(input_option_icon_html(input_option_icon.val()));
  38. });
  39. }
  40. });
  41.  
  42.  
Обратите внимание на пункт 6, строку 23 — $.nmManual('/templates/default/icons.html');, если используете не дефолтный шаблон — не забудьте поменять в пути default на название своего шаблона.

На этом всё. Благодарю за внимание.
0
Loadырь Loadырь 8 лет назад #
Круто. Спасибо.
Спойлер
Надо бы его "универсализировать" для подключения других шрифтовых иконок и вообще картинок или svg. Тогда можно и пулреквест смело выкладывать на гите.
0
Джехутимери Джехутимери 8 лет назад #
Спасибо, пост поправил.
Для универсализации достаточно заменить содержимое icons.html и подключить другой шрифт.
Возможно, добавлю ещё шрифтовых иконок и разобью разные коллекции табами. Надо будет тут подумать.
0
Glaz Glaz 8 лет назад #
При нажатии на "Выбрать" получаю в модальном окне An error occured. Залил на чистый сайт, шаблон дефолтный.
0
mic mic 8 лет назад #
в релиз ее надо добавить)
0
Val Val 8 лет назад #
Уже не раз повторял, но Баба яга против! =)
+2
Def Def 8 лет назад #
Вот еще хорошая реализация http://exticms.com/ext/mega-menu

можно не только иконки добавлять, но и выводить виджеты в меню и фиксировать при прокрутке
+1
Kreator Kreator 8 лет назад #
Очень это все хорошо. Только:
1. Окультурить все это в хук (или компонент), чтоб не было такой портянки с правками. Станется только 2 маленьких вставки
2. Добавить возможность отключить текст (заголовко) меню, чтоб можно было только иконку оставить
И очень хорошо.
0
Джехутимери Джехутимери 8 лет назад #
Если объясните "на пальцах", как это сложить в хук, буду очень благодарен.
+3
Kreator Kreator 8 лет назад #
Ну я обычно чтобы не трогать файлы движка а бывает и даже шаблона, создаю компонент.
В него все что нужно прописываю, цепляю на нужных страницах css и js хуками.
Ну и нужное содержимое все в папку этого компонента.

В вашем случает js и css код упаковать в свои файлы и вызвать эти файлы при загрузке шаблона.

То же касается файла - всплывающей странички с иконками.
Вызвать таки эту страницу штатно шаблоном из этого же компонента.

В итоге получается отдельный компонент со своим содержимым и потом при обнове icms намного меньше искать что и где нужно не забыть обновить.
+2
Джехутимери Джехутимери 8 лет назад #
Спасибо, понял.
Буду пробовать.
0
Val Val 8 лет назад #
Идея использовать дополнительное свойство очень интересна! Но вставлять иконки через JS выглядит довольно сомнительной. Как то нелогично делать все это на стороне клиента ))
0
Джехутимери Джехутимери 8 лет назад #
Ну это только из бекенда для удобства, на фронтенде через php.
0
Val Val 8 лет назад #
Не совсем понял что вы имели ввиду.
Я писал о том, что, на сколько я понял, добавление "html-кода иконки" происходит не на стороне сервера, когда генерируется страница, а уже в браузере при просмотре этой самой страницы. Что определенно скажется на скорости загрузки и работы страницы в целом (да, может быть не критично, но тем не менее)
Получается не совсем логично: страница формируется на сервере (но не совсем полностью), потом отсылается пользователю и у него в браузере уже окончательно доформировывается.
0
Джехутимери Джехутимери 8 лет назад #
Val, немного по-другому laugh
Выбор иконки - инпут, куда нужно передать класс иконки (например, fa fa-user). Если значение есть, то выводиться html иконки ($menu_item_icon = isset($item['options']['icon']) ? '<i class="menu-icon '.$item['options']['icon'].'"></i> ' : '';).
Весь js нужен только только как внешний интерфейс, по факту клика на иконку в инпут всего лишь загоняется значение.
0
Val Val 8 лет назад #
Тогда прошу прощения за свою невнимательность zst Надо мне было более детально изучить ваше предложение.
+1
Игорь Lu Игорь Lu 8 лет назад #
Подключил, но в админке иконки в модальном окне не отображаются. Оказывается стили
Код PHP:
  1. <?php $this->addMainCSS("templates/{$this->name}/css/font-awesome.min.css"); ?>
надо подключать и в файле \templates\(ваш шаблон)\admin.tpl.php

Не знаю, может это только у меня так, но, вот как-то так laugh

Ну, а за доработку + однозначно, хотя, как уже писали выше, компонентом было бы конечно удобней.
+1
Bubble Gumoff Bubble Gumoff 8 лет назад #
Однозначно нужный для оформления функционал!
0
Нико Нико 8 лет назад #
В шаблоне не выводятся значки все сделал как в описании
0
Джехутимери Джехутимери 8 лет назад #
Перезалил архив, пост поправил.
Замените icons.html на новый из архива.
0
Dmitriy505 Dmitriy505 8 лет назад #
Хорошая штука...А на первую ветку если такое сделать?
0
Игорь Lu Игорь Lu 8 лет назад #
Под версию InstantCMS 2.5.0 дополнение не работает как надо. В админке нет кнопки выбора иконки и нет модального окна с иконками, есть только поле, куда можно вставить код иконки вручную с Официального сайта Font Awesome.
Планируется ли исправить эти недочёты под последнюю версию Инстант?
За раннее благодарен!
0
Kantona Kantona 8 лет назад #
Установил на версию 2.5.1 абсолютно все работает! Спасиб за разработку
0
MaKo MaKo 8 лет назад #
Если Вас не затруднит, можно глянуть как поправили файлы ? У меня тоже в админке нет кнопки выбора иконки.
0
Sergon Sergon 7 лет назад #
2.6.1 Работает отлично! Благодарю!
не забывайте кеш очистить))
0
Sergon Sergon 7 лет назад #
Джехутимери, а как можно дополнить к примеру своими иконками?
0
Sergon Sergon 7 лет назад #
обновился до 2.7.2, полёт нормальный! Необходимо пробежаться по пунктам, перепроверить и очистить кеш.

Еще от автора

Портальный шаблон MTheme для InstantCMS 2.6.1 - глобальное обновление
Здравствуйте, дорогие пользователи InstantCMS. Рад предоставить вашему вниманию обновленный шаблон MTheme для InstantCMS 2.6.1.
Виджет "Список групп" для InstantCMS 2.5.1
Обычный виджет вывода списка групп. О нём забыли в коробке Внешний вид. Настройки: Демо | Скачать Установка стандартная.
Портальный шаблон MTheme
Здравствуйте, сообщество. Представляю Вам шаблон MTheme, разработанный для порталов на основе InstantCMS 2.5.1.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.