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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Foundation Icons Fonts – 137+ иконок
• Sosa icon font – 121+ иконка
• Font Awesome – 628+ иконок
• Iconic Icon Set – 172+ иконки
• Raphaël Icon-Set – 116+ иконок
• PulsarJS @FontFace – 73+ иконки
• IcoMoon – 316+ иконок
• Typicons – 88+ иконок
• Entypo – 100+ иконок
• Heydings Icons – 60+ иконок
• JustVector Social Icons Font – 52+ иконки
• Modern Pictograms – 86+ иконок
• Brandico – 18+ иконок
• Signify Lite – 38+ иконок
• Web Symbols typeface – 78+ иконок
• Social Media Icons – 74+ иконки
• ikoo – 65+ иконок

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

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

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

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

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

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

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

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

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

• Fontello
• IcoMoon App
• Pictonic Fontbuilder
• Glyphter
• Fontastic

Все сервисы позволяют бесплатно сгенерировать уникальный иконочный шрифт, состоящий их выбранных вами иконок из библиотеки сервиса, а также загруженных 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-стилей иконке можно придать не только разные размер и цвет, но и трансформировать ее.