Добрый вечер, Гость! Представляем Вам наши форумы. Вы можете зарегистрироваться чтобы писать на форумах или зайдите под своим именем, если Вы уже регистрировались.
   
   


Форум
 Сайт Status-X.ru / Теория и практика Web-дизайна
         Иконки в навигации

Похожие темы

Иконки в навигации


События Суббота, 06.01.2018, 14:06

MAPC2012

Группа: Пользователь
Ранг: Продвинутый
Cообщений: 108
Регистрация: 04.08.2014
Может кому пригодится...

Довольно простая реализация. При работе теряем только атрибут "title". Но он не всегда нужен при навигации.



Создаём navigation-icons.tpl (по пути: site.ru/theme/название_вашей_темы/navi/)

Вставляем этот код:

PHP-код

{if !empty($SiteNavigation)}
<
article>
  <
nav class="btn-bar nav-light">
      {foreach 
from=$SiteNavigation item=navi}
    <
a target="{$navi->target|default:'_self'}href="{$navi->document|escape"html"}class="btn btn-glass"><class="fa {$navi->AltTitle|sanitize}aria-hidden="true"></i>&nbsp;&nbsp;{$navi->title|sanitize}</a>
      {/foreach}
  </
nav>
</
article>
{/if}


Теперь подключаем нужную навигацию в любом месте шаблона, допустим с меню №1
Код подключения:

Код
{navigation id=1 tpl='navigation-icons.tpl'}


Пример реализации:



Нужную иконку задаём в админке. Навигация->Обзор->Нужное Вам меню. Редактируем "Текст ссылки" просто вставляя код иконки, например "fa-user".
Я у себя переименовал "Текст ссылки" на "Font Awesome" для удобства, а скрин для примера выложен:




Давно хотел меню с иконками замутить. Догадался только таким способом реализовать. Удобство в том, что редактирование доступно с админки и путём настройки самого меню, а не специальной вставки кода на сайт)))

Для тех, кто действительно хочет, чтобы оно заработало... Не забудьте стили к сайту прикрутить)))

Отредактировано Виктор (MAPC2012): 06.01.2018, 21:41:28
Вложения
Благодарности modja


Пользователь офлайн
События Суббота, 06.01.2018, 20:39

Axelaredz

Группа: Пользователь
Cообщений: 149
Регистрация: 26.08.2015
Город: Cочи
У тебя как я то странная модификация одной из моих идей)
Но сейчас советую обратить внимание на этот вариант https://fontawesome.com/get-started/svg-with-js
Пользователь офлайн
События Суббота, 06.01.2018, 21:40

MAPC2012

Автор текущей темы
Группа: Пользователь
Ранг: Продвинутый
Cообщений: 108
Регистрация: 04.08.2014
Это новая версия иконок. Не хочу её ставить. Там многое поменяли, что придётся и мне менять(((
Пользователь офлайн
События Суббота, 06.01.2018, 23:44

Axelaredz

Группа: Пользователь
Cообщений: 149
Регистрация: 26.08.2015
Город: Cочи
Эм.. в твоём шаблоне нужно только добавить классу fa буковку s чтобы вышло fas {$navi->AltTitle|sanitize}..
и заработает с новыми)
они просто разделили иконки на fas- solid far- regular или light и pro которые платные
Пользователь офлайн
События Воскресенье, 07.01.2018, 08:19

MAPC2012

Автор текущей темы
Группа: Пользователь
Ранг: Продвинутый
Cообщений: 108
Регистрация: 04.08.2014
А если в самом стиле иконки прописаны? В шаблоне тоже применяются, в других местах. В "content" например? Не хочется уже менять...

Отредактировано Виктор (MAPC2012): 07.01.2018, 08:24:11
Пользователь офлайн
События Воскресенье, 07.01.2018, 14:14

Axelaredz

Группа: Пользователь
Cообщений: 149
Регистрация: 26.08.2015
Город: Cочи
Сами иконки естественно поставить по инструкции, https://fontawesome.com/get-started/svg-with-js тобишь подключить js скрипт и css
из этого файла https://use.fontawesome.com/releases/v5.0.2/fontawesome-free-5.0.2.zip
и читать https://fontawesome.com/how-to-use/svg-with-js
Благодарности MAPC2012
Пользователь офлайн


Похожие темы  |   Следующая тема

Быстрый переход:  
 

 Сейчас на сайте

Пользователей: 0, Гостей: 2

Поисковые боты: 215
Bot(198), oBot(11), BingBot(3), Googlebot(2), Crawler
 Статистика форума

  Темы Сообщения Пользователи
За сутки:
За неделю:
За месяц:
Всего:
Мы приветствуем нового участника: wonad81290
 Дни рождения

Олег (44)
Copyright © 2009 - 2024 SX All rights reserved | Powered by SX CMS 1.06 UTF | Контакты