Использование шрифтов иконок в наших шаблонах. Шрифт иконок Metro Icon Font

Режим работы технической поддержки

понедельник- пятница: 11:00-17:00
суббота - воскресенье: выходной К сожалению, в выходные дни мы не сможем ответить на Ваши вопросы.

Мы рекомендуем хостинг TimeWeb

300x250 7

Информация для покупателей

Как скачать шаблон

822
1

Для того, что бы скачать нужный шаблон Virtuemart 3 необходимо перейти на его страницу. Так же, если необходимо, можно выбрать услугу установки шаблона и нажать кнопку Скачать шаблон.

Как оплатить покупку шаблона

630
0

После того, как Вы оформите покупку шаблона (Как скачать шаблон). На самом последнем этапе, откроется страница, на которой вы сможете оплатить шаблон.

Условия обслуживания

685
0

Покупая шаблон, Вы полностью соглашаетесь с нашими Условиями обслуживания, которые описаны ниже. Так же Вы подтверждаете, что ознакомились с этими Условиями и с ДЕМО версией шаблона и не имеете претензий по их содержанию.

Лицензирование шаблонов

778
0

Все наши шаблоны распространяются по лицензии на 1 домен. Т.е., покупая у нас шаблон, Вы можете использовать его только на одном доменном имени. Это не значит, что Вы не можете сначала сделать сайт на тестовом домене и перенести на основной. Для этого у нас предусмотрена смена домена.

Акции и скидки на адаптивные шаблоны Virtuemart 3

920
0

В этом разделе размещены все наши акционные предложения по покупке шаблонов и разработке сайтов.

Использование шрифтов иконок в наших шаблонах. Шрифт иконок Metro Icon Font

585 0

Во многих наших шаблонах мы используем шрифты иконок. Что это такое?! Шрифты иконок, объясню своими словами, это графические элементы (иконки), реализуемые с помощью шрифта. Т.е. иконка представляет из себя не графическое изображение (картинка), а символ шрифта.

Использование таких иконок, позволяет существенно ограничить вес загружаемого контента, что, в свою очередь, позволяет ускорить загрузку страницы. Мы в своих шаблонах используем шрифт Metro Icon Font. Этот шрифт распространяется бесплатно, сайт разработчика metroui.org.ua (на сайте можно скачать сам шрифт и подключить его к любому сайту)

Теперь давайте детально рассмотрим, как это работает. Начнем с того, как подключить шрифт к нашему сайту.

1. Подключение шрифта иконок к шаблону Joomla

Обратите внимание!

К нашим шаблонам шрифт уже подключен. Поэтому подключать повторно его не нужно. Если Вы работаете с нашим шаблоном, можете смело переходить ко второву пункту этой статьи

Во-первых нужно скачать сам шрифт иконок... Переходим на сайт разработчика (metroui.org.ua) и скачиваем.

После этого нужно загрузить шрифт на наш сайт. Делается это просто. По FTP копируем файлы шрифта в папку templates/шаблон/fonts. А в папку templates/шаблон/css копируем файл metro-icons.css. Далее открываем файл templates/шаблон/index.php и после тега <head> добавлям код

<link href="/templates/шаблон/css/metro-icons.css" rel="stylesheet">
В адресе слово ШАБЛОН поменяйте на название Вашего шаблона

2. Исползование шрифта иконок на сайте Joomla

Теперь шрифт подключен непосредственно к шаблону. Далее на необходимо применить его на сайте. Для этого разработчики предусмотрели таблицу всех иконок (metroui.org.ua/font.html). На этой странице с помощью FireBag мы можем четко видеть каким именно кодом выводится та или иная иконка. Рассмотрим на примере иконки символа рубля.

Простой вставкой кода, как это показано на картинке

<span class="mif-rouble"></span>

Мы получаем изображение рубля -

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

3. Использование шрифта иконок в наших шаблонах

Приведем пример на основе шаблона интернет-магазина Virtuemart 3 'MegaShop'. Начнем с главного меню. Как видите в главном меню используются именно эти иконки.

Для использования иконок в этом меню мы предусмотрели возможности самой CMS. Т.е. для отображения нужной иконки Вам не придется "рыть" код. Нужно всего лишь в админ панели прописать нужный код иконки

Код иконки

Как получить код иконки я написал в пункте 2. этой статьи

Для этого нужно перейти в сам пункт меню и прописать класс иконки, который можно взять из таблицы всех иконок.

Ну а далее Вы можете использовать эти иконки, как только можете. В любых статьях и модулях!

Вам помогла эта статья?
Уделите несколько секунд, что бы поблагодарить нас

Статьи, которые могут быть Вам интересны

Остались вопросы? Можете задать их в этой форме


Защитный код
Обновить изображение

Последние статьи в базе знаний

W-MIX.ru клуб разработчиков шаблонов для Joomla и Virtuemart 3 на русском языке © 2014-2017. Все права защищены.

Все шаблоны, представленные на сайте принадлежат исключительно W-MIX.ru

Распространение, копирование, тиражирование, перепродажа категорически ЗАПРЕЩЕНЫ!
Информация, предоставленная, на сайте не является публичной офертой
Обратите внимание на режим работы технической поддержки! Cегодня Суббота - выходной день