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

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

Итак, для его подключения шрифта нужно в файл функций functions.php добавить следующий код:

add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
 wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' );
}

Ну, а теперь перейдем к примерам.

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

В текстовом редакторе переключаетесь в обычный HTML режим. Там пишете код, указанный ниже, и сохраняете текст, не переходя в визуальный режим:

<i class="fa fa-phone"></i> +91 1234567890

.fa-phone {
font-size: 25px;
vertical-align: middle;
padding-right: 5px;
}

В итоге получится такая иконка возле текста:

Список всех иконок найдете тут возле каждой из них увидите название класса, что сможете использовать. Единственное, что перед ним обязательно нужно указывать также и класс fa (см. код примера выше).

Иконки Font Awesome в меню

Здесь нужно внимательно изучить HTML код страницы, а точнее вашего меню. Просматривая его увидите что-то вроде такого:

Каждый пункт меню имеет свой конкретный ID, для которого вы можете задавать стили отдельно. Кроме того, можно будет использовать класс для всего меню, для указания общих настроек. В style.css добавляете код, аналогичный следующему:

.menu-primary li a:before {
 font-family: FontAwesome;
 padding-right: 7px;
 /*font-style: normal;
 font-weight: normal;
 text-decoration: inherit;*/
}
 
/* Home menu item */
#menu-item-1616 a:before {
 content: "\f015";
}
 
/* Pages menu item */
#menu-item-1413 a:before {
 content: "\f0e8";
}
 
/* Categories menu item */
#menu-item-1414 a:before {
 content: "\f15b";
}

Сравните код с картинкой выше и вы поймете логику: menu-primary — общий стиль для меню, а menu-item отвечает за конкретный пункт. В итоге получится такое.

Значение для параметра content найдете на сайте Font Awesome при переходе на страницу с конкретной иконкой.

Здесь и значение Unicode, и имя класса, который нужно использовать в тексте (как для первого примера).

Font Awesome в заголовке виджета

Вы можете добавить иконку в заголовок того или иного виджета в WordPress. Для этого вам только нужно узнать какой Class или ID у него указан (просматриваете HTML код). Далее в файле стилей добавляете что-то вроде:

#meta-3 .widget-title:before {
font-family: FontAwesome;
padding-right: 7px;
content: "\f05a";
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}

В итоге возле заголовка выводится иконка.