Font Awesome — Пожалуй самый популярный иконочный шрифт. Шрифт дает нам масштабируемые векторные значки, которые можно мгновенно настроить: размер, цвет, тень и все, что можно сделать с помощью CSS.
Особенности шрифта
- Один шрифт = 675 иконок
- Бес использования JavaScript
- Меньше проблем с совместимостью, потому что Font Awesome не требует JavaScript.
- Бесконечная масштабируемость
- Масштабируемая векторная графика означает, что каждый значок выглядит потрясающе при любом размере.
С чего начать
Font Awesome CDN — это самый простой способ подключения Font Awesome на вашем веб-сайте или в приложении, причем всего лишь с одной строкой кода. Без загрузки или установки!
На официальном сайте Font Awesome вам нужно лишь ввести свой email и вы получить ссылку на CDN (Content Delivery Network — система распределенной доставки контента), с его помощью можно подключить Font Awesome, но если вам не нужен CDN, ну к примеру ваши пользователи не разбросаны по всему земному шару, а сосредоточены в пределах одной страны, да и не особо высокие показатели посещаемости, меньше миллиона в день =), то можно скачать и подключить Font Awesome локально, на своем сервере.
Ручная установка
Дальше мы уже рассмотрим вариант ручной установки шрифта Font Awesome в наш сайт на базе WordPress.
- Первым делом нам необходимо скачать архив с шрифтом по ссылке http://fontawesome.io/get-started/
- При переходе по ссылке, промотайте страницу чуть ниже и выберите кнопку Donwload, в появившемся всплывающем окне, просто выбирайте «No thanks, just download Font Awesome 4» и все, дальше пойдет автоматическая загрузка шрифта.
- После того, как вы скачали архив, распакуйте его у себя на компьютере.
- Подключитесь по FTP к вашему сайту, перейдите в каталог wp-content / themes / ваша тема /
- Согласно дереву расположения файлов, я закачал из папки Font Awesome/css в папку на сервере wp-content/themes/моя тема/assets/css/, а из папки Font Awesome/fonts в папку на сервере wp-content/themes/моя тема/assets/fonts
- Дальше переходим к редактированию нашего файла functions.php, потому как именно он отвечает за подключение всех стилей, добавим в него следующий код:
wp_enqueue_style('font-awesome', get_template_directory_uri().'/assets/css/font-awesome.min.css');
Как использовать FontAwesome
Иконки вставляются с помощью специальной HTML разметки. Весь список доступных иконок с пояснениями как их использовать можно найти на официальном сайте.
Я покажу на примере при вставке иконки WordPress. Сама иконка в шрифте называется fa-wordpress и вставляется она с помощью кода:
<i class="fa fa-wordpress" aria-hidden="true"></i>
Данные иконки можно кастомизировать на свой вкус, например можно указать размер
<i class="fa fa-wordpress fa-lg"></i> fa-lg
<i class="fa fa-wordpress fa-2x"></i> fa-2x
<i class="fa fa-wordpress fa-3x"></i> fa-3x
<i class="fa fa-wordpress fa-4x"></i> fa-4x
<i class="fa fa-wordpress fa-5x"></i> fa-5x