font awesome

Как подключить Font Awesome в WordPress

Font Awesome — Пожалуй самый популярный иконочный шрифт. Шрифт дает нам масштабируемые векторные значки, которые можно мгновенно настроить: размер, цвет, тень и все, что можно сделать с помощью CSS.

Особенности шрифта

  1. Один шрифт = 675 иконок
  2. Бес использования JavaScript
    • Меньше проблем с совместимостью, потому что Font Awesome не требует JavaScript.
  3. Бесконечная масштабируемость
    • Масштабируемая векторная графика означает, что каждый значок выглядит потрясающе при любом размере.

С чего начать

Font Awesome CDN — это самый простой способ подключения Font Awesome на вашем веб-сайте или в приложении, причем всего лишь с одной строкой кода. Без загрузки или установки!

На официальном сайте Font Awesome вам нужно лишь ввести свой email и вы получить ссылку на CDN (Content Delivery Network — система распределенной доставки контента), с его помощью можно подключить Font Awesome, но если вам не нужен CDN, ну к примеру ваши пользователи не разбросаны по всему земному шару, а сосредоточены в пределах одной страны, да и не особо высокие показатели посещаемости, меньше миллиона в день =), то можно скачать и подключить Font Awesome локально, на своем сервере.

Ручная установка

Дальше мы уже рассмотрим вариант ручной установки шрифта Font Awesome в наш сайт на базе WordPress.

  1. Первым делом нам необходимо скачать архив с шрифтом по ссылке http://fontawesome.io/get-started/
  2. При переходе по ссылке, промотайте страницу чуть ниже и выберите кнопку Donwload, в появившемся всплывающем окне, просто выбирайте «No thanks, just download Font Awesome 4» и все, дальше пойдет автоматическая загрузка шрифта.
  3. После того, как вы скачали архив, распакуйте его у себя на компьютере.
  4. Подключитесь по FTP к вашему сайту, перейдите в каталог wp-content / themes / ваша тема /
  5. Согласно дереву расположения файлов, я закачал из папки Font Awesome/css в папку на сервере wp-content/themes/моя тема/assets/css/, а из папки Font Awesome/fonts в папку на сервере wp-content/themes/моя тема/assets/fonts
  6. Дальше переходим к редактированию нашего файла functions.php, потому как именно он отвечает за подключение всех стилей, добавим в него следующий код:
    	//Подключение FontAwesome
    	wp_enqueue_style('font-awesome', get_template_directory_uri().'/assets/css/font-awesome.min.css');

Как пользоваться Font Awesome

Иконки вставляются с помощью специальной 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

и получить собственно иконки разных размеров:
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

С остальными функциями можно ознакомится на официальном сайте шрифта.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *