Используем иконки Font Awesome без плагина

Здравствуйте, сегодня будет подключать шрифт Font Awesome (набор иконок) к сайту на wordpress вручную (без плагина), а также расскажу как их использовать на сайте, например, в меню сайта без плагина.

Скачать исходники для статьи можно ниже

Официальный сайт шрифта с множеством иконок:
“fontawesome.io”

Здесь можно скачать zip архив иконок и потом подключить его к сайту или же можно подключится к ним через ссылку на них.

1. Подключение шрифта иконок Font Awesome без плагина

1.1. Через внешнюю ссылку на шрифт:

Для этого заходим в админку wordpress, в левом меню выбираем пункт “Внешний вид”, подпункт “Редакторы”, справа в списке файлов ищем – functions.php и добавляем в него следующий код:

//enqueues our external font awesome stylesheet
function enqueue_our_required_stylesheets(){
	wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); 
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

Последняя версия шрифта иконок – 4.7.0, как только выйдет новая версия можете просто поменять цифры в коде на нужную версию.

1.2. Файлы шрифта находятся на вашем сайте (без внешней ссылки).

Здесь нужно загрузить zip архив шрифта с сайта “fontawesome.io”:

Жмем на кнопку Download и загружаем архив.

Распаковываем zip архив, в нем нам понадобится только две папки: css и fonts:

, и загружаем их через FTP клиент (бесплатный FileZilla или Total Commander) на сервер сайта.

Давайте создадим в папке темы сайта (для примера, если на сайте тема –
Twenty Twelve, то путь к папке темы будет следующий: “http://site.ru/wp-content/themes/twentytwelve/”) новую папку – fontawesome:

В неё и закинем наши две папочки (css и fonts):

После этого заходим в админку wordpress, в левом меню выбираем пункт “Внешний вид”, подпункт “Редакторы”, справа в списке файлов ищем – functions.php и добавляем в него следующий код:

function enqueue_our_required_stylesheets(){
	wp_enqueue_style('font-awesome', get_stylesheet_directory_uri() . '/fontawesome/css/font-awesome.css'); 
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

К сведению: get_stylesheet_directory_uri() – получает URL текущей темы, не содержит слэша на конце. Учитывает дочернюю тему. Учитывает SSL. Например, если вы используете тему twentyten, то возвращаемый УРЛ не содержит слэша (/) на конце, а именно: “http://site.ru/wp-content/themes/twentyten”
Вышеуказанный код можно было бы записать и иначе (без использования get_stylesheet_directory_uri), вот так:
function enqueue_our_required_stylesheets(){
	wp_enqueue_style('font-awesome', '//gameforstreet.ru/wp-content/themes/twentytwelve/fontawesome/css/font-awesome.css'); 
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

Шрифт с иконками Font Awesome мы подключили без использования плагина!

2. Использование иконок Font Awesome на сайте.

2.1. Как вставлять иконки в записи/странички на сайте wordpress.

Посмотреть как выглядит каждая иконка можно здесь:

“fontawesome.io/icons/”