Добавление иконочных шрифтов на сайт Joomla

Несколько лет назад я писал статью Добавление иконок пунктам меню Joomla. Простой и хороший способы. Тогда мы рассматривали возможности вставки иконок на сайт под управлением Joomla c помощью простых изображений и спрайтов. Каждый из способов имел свои достоинства и недостатки. Тогда я назвал эти способы «Простой» и «Хороший». В этой статье я расскажу про «Отличный» способ добавления иконок на сайт, который позволит существенно сократить время загрузки страниц с иконками, а также даст вам над ними тотальный контроль.

Что такое «иконка»?

Давайте вспомним, что вообще такое «иконка». Это маленькое изображение, которое  украшает сайт и делает некоторые  часто употребляемые элементы, например, кнопки или ссылки меню, нагляднее. Примеры иконок вы можете видеть на сайте wedal.ru в горизонтальном и вертикальном меню:

иконки на wedal.ru

Проблемы использования иконок

Какие проблемы были при использовании иконок?

Стандартные иконки-картинки:

  • Сложно масштабировать, либо имеет большой размер
  • Для смены цвета иконки (например, при наведении курсора) нужно создавать дополнительную иконку другого цвета
  • При большом количестве иконок на странице, сильно замедляется ее загрузка

CSS-спрайты (если вы не знакомы со спрайтами, прочитайте в первую очередь эту статью):

  • Масштабирование отдельных иконок спрайта невозможно или крайне затруднительно
  • Для смены цвета иконки (например, при наведении курсора) нужно создавать дополнительную иконку другого цвета в спрайте
  • Большой размер основного изображения спрайта
  • Спрайт загружается целиком, даже если на странице требуется всего одна иконка
  • Сложное управление спрайтами при добавлении/изменении иконок

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

Несколько лет назад технология CSS-спрайтов была актуальной, но сегодня существует гораздо более удобный способ создания иконок, который мы рассмотрим далее.

Иконочные шрифты (Icon Fonts).

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

Подход, когда иконки являются буквами шрифта, дает нам несколько невероятных преимуществ, о которых раньше нельзя было даже мечтать:

  • Все иконки, как и для спрайтов, храниться в едином файле шрифта
  • Мы можем изменять размер любой из иконок с помощью CSS-стиля font-size
  • Мы можем изменять цвет любой из иконок с помощью CSS-стиля color
  • Мы можем использовать для иконок всю динамику, которую дает нам CSS: hover, focus, transition и др. Можно менять цвет и размер при наведении, фокусе на форме и др.
  • Используя продвинутые CSS-стили, мы можем даже вращать иконки

Имеются у данного подхода и недостатки, но они несущественны:

  • Иконочные шрифты требуют загрузки файла шрифта, даже если на странице используется только одна иконка
  • В иконочных шрифтах иконки строятся с помощью векторной однотонной графики, соответственно, для шрифта нельзя использовать разноцветные изображения и изображения, состоящие из пикселей (растровые)

Если данные ограничения вас не пугают, предлагаю окунуться в мир иконочных шрифтов.

Иконочные шрифты. Где взять? Готовые наборы шрифтов

Первый вопрос: где взять такие специальные иконочные шрифты. В Интернете есть много сайтов, которые предлагают готовые иконочные шрифты. Ниже приведу небольшой набор готовых шрифтов, взятый с одного зарубежного сайта:

Одним словом, есть, где разгуляться =).

Из всех перечисленных выше сервисов хочу выделить Font Awesome. Сервис имеет хороший и очень внушительный набор иконок, среди которых можно найти подходящие практически на все случаи жизни.

Также хочу заметить, что если вы используете у себя на сайте CSS-фреймвок Bootstrap, по которому на сайте есть серия уроков Создание адаптивного шаблона Joomla с использованием Bootstrap, то в нем уже есть готовый набор иконок. Посмотреть их можно здесь. А если ко всему прочему вы используете еще и шаблон MasterBootstrap, то в его настройках сможете подключить на сайт Font Awesome, активировав всего одну опцию.

Предупреждение! Не стоит бездумно подключать на сайте подряд все шрифты, если из каждого вам понравилось всего несколько иконок. Файлы шрифтов имеют довольно большие размеры (десятки, а иногда и сотни килобайт) и подключение на сайт сразу нескольких наборов шрифтов приведет к существенному замедлению его загрузки.

Иконочные шрифты. Где взять? Генераторы шрифтов

Но что делать, если все-таки хочется взять иконки из разных наборов или у сайта есть дизайн, в котором все иконки прорисованы? Здесь нам помогут онлайн-генераторы иконочных шрифтов.

Генераторы позволяют делать три вещи:

  1. Выбирать готовые иконки из иконочного шрифта и создавать на его основе урезанный иконочный шрифт, содержащий только необходимые иконки. Размер такого шрифта значительно меньше размера базового.
  2. Выбирать готовые иконки из разных иконочных шрифтов и совмещать их в один.
  3. Загружать ваши собственные SVG-файлы изображений и делать из них иконочный шрифт.

Вот несколько бесплатных генераторов иконочных шрифтов:

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

После генерации сервис позволяет скачать вам архив с готовым иконочным шрифтом, а также готовыми CSS-стилями для подключения каждой иконки.

Иконочные шрифты. Как подключить в Joomla?

Чтобы подключить к вашему сайту на Joomla иконочный шрифт, нужно:

  1. Скопировать содержимое папки fonts из скачанного архива шрифта в папку fonts используемого вами шаблона Joomla: templates/ИМЯ_ВАШЕГО_ШАБЛОНА/fonts/. Если такой папки не существует, следует создать ее самостоятельно.
  2. Скопировать css-файл шрифта папки css из скачанного архива шрифта в папку css вашего шаблона Joomla: templates/ИМЯ_ВАШЕГО_ШАБЛОНА/css/.
  3. Подключить скопированный css-файл в шаблоне Joomla. Для этого в файле templates/ИМЯ_ВАШЕГО_ШАБЛОНА/index.php  добавить следующий код:

 

<?php
$doc = JFactory::getDocument();
$doc->addStyleSheet('templates/' . $this->template . '/css/ИМЯ_CSS_ФАЙЛА_ШРИФТА_ИЗ_ПУНКТА_2.css');
?>

 

Этот код подключит заданный css-файл к шаблону.

Если вам не хочется выполнять пункты 2 и 3, просто скопируйте CSS-код из пункта 2 в один из уже подключенных к вашему шаблону CSS-файлов.

На этом всё. Проверить подключен ли CSS-файл шрифта к шаблону можно так:

  1. Перезагрузите страницу сайта
  2. Нажмите на ней правой кнопкой мыши и выберите «Просмотр исходного html-кода страницы» (или подобное в зависимости от браузера)
  3. В коде должна присутствовать ссылка на подключенный файл, а при клике по ссылке этот файл должен открываться в браузере.

Также советую проверить правильность указания пути в CSS-файле шрифта. Обычно путь указан как:

 

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

 

но иногда бывает нужно поправить пути к файлам шрифтов на ../fonts . На этом подключение окончено. Осталось научиться правильно использовать иконки.

Иконочные шрифты. Как использовать в Joomla?

Использовать иконку, которая вводится на странице как буква, несомненно, круто. Но еще круче, когда никакую букву вводить не нужно в принципе. Современные иконочные шрифты используют CSS-псевдокласс :before и CSS-стиль content. Не вдаваясь в технические детали, их суть сводится к тому, чтобы показать в html-теге с заданным классом какое-то содержимое, которое указано только в CSS-файле, но не указано в html. К примеру, если у нас есть пустой div на странице, у которого есть какой-то CSS-класс, то мы можем только лишь средствами CSS поместить в него символ. Вы можете посмотреть, как это работает, выделив с помощью Firebug или другого веб-инспектора, любую иконку на wedal.ru.

Таким образом, используя технику, описанную выше, можно показывать иконку лишь добавлением к необходимому html-тегу соответствующего CSS-класса. Каждая коллекция иконок содержит описание этих классов. Посмотрим на Font Awesome. На странице icons представлен список всех иконок с подписями, каждая из которых является уникальным CSS-классом, который данную иконку вызывает:

Пример иконок

Если кликнуть по любой из иконок, откроется отдельная страница, на которой указан полный html-код вставки иконки, например:

Отдельная иконка

Т.е. вставив данный код на нашу страницу с подключенным иконочным шрифтом, мы увидим на ней нашу иконку. Используя CSS-класс иконки, мы можем добавлять ей любые CSS-стили, которые применяются к шрифтам, трансформируя ее, таким образом, под наши нужды.

Если вы подключили шрифт правильно, то добавление пустого html-тега с заданным CSS-классом иконки приведет к появлению в нем на странице заданной иконки.

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

Понравилась статья? Сохраните себе на стену:

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях ниже.

4.9166666666667 1 1 1 1 1 4.92

Комментарии  

0 # RE: Добавление иконочных шрифтов на сайт JoomlaDina 28.09.2016 20:05
Я использую плагин NS Font Awesome и компонент ReReplacer, в итоге в навбаре кнопки с иконками соцсетей меняют цвет при наведении курсора (или тапе на мобильном экране) - одна беда, иконки грузятся через раз :-( Иногда вместо них просто серые кружочки - не знаете, в чем может быть проблема?
А вообще согласна с предыдущим отзывом: одной фразой "Если вы подключили шрифт правильно, то добавление пустого html-тега с заданным CSS-классом иконки приведет к появлению в нем на странице заданной иконки." дела не объяснишь. куда чего добавлять-то? :-)
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление иконочных шрифтов на сайт JoomlaWedal 29.09.2016 09:31
Dina, про плагин ничего сказать не могу. Никогда не использовал его.
Могу только сказать, что выше описан способ использования иконок без установки дополнительных расширений. Это более правильный подход, т.к. количество сторонних расширений на сайте всегда нужно стараться минимизировать.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление иконочных шрифтов на сайт JoomlaTuner 16.06.2016 13:03
Всё понятно, кроме одного - как всё это дело внедрить в пункты меню!?
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Добавление иконочных шрифтов на сайт JoomlaWedal 17.06.2016 04:22
Tuner, в настройках пункта меню есть опция CSS-класс ссылки. Можно добавить класс иконки туда. Это будет работать, но, вероятно, иконка будет прижата прямо к тексту ссылки. Отодвинуть ее можно с помощью CSS, но есть ограничения.

Я предпочитаю использовать другой, более сложный способ. Я переопределяю макет модуля меню в шаблон Joomla и исправляю его таким образом, чтобы перед ссылкой стоял реальный тег иконки, как в примере в статье,и переменную CSS-класс ссылки переношу в этот тег. Для ссылки она всё равно особо не нужна, т.к. к ней всегда можно обратиться через уникальный класс тега li, зато иконки таким способом добавляются к пунктам меню Joomla на ура.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление иконочных шрифтов на сайт JoomlaTuner 17.06.2016 18:59
Красиво написано! Только похоже моих знаний не хватает для понятия этого. В любом случае спасибо. Если бы расширили статью, было бы очень хорошо. С пошаговыми возможностями переопределения............
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление иконочных шрифтов на сайт JoomlaWedal 10.11.2016 10:02
Tuner, написал пошаговую статью, показывающую, как внедрить иконки Bootstrap в меню Joomla: http://wedal.ru/shabloni-joomla/sozdanie-adaptivnogo-shablona-joomla-s-ispolzovaniem-bootstrap-chast-5-dobavlenie-ikonok-bootstrap-punktam-menyu-joomla.html
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Вверх