Ноя
6

Шрифт Font Awesome: Использование иконок в WordPress

Author admin    Category Полезное     Tags

Шрифт Font AwesomeFont 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 режим. Там пишете код, указанный ниже, и сохраняете текст, не переходя в визуальный режим:

 +91 1234567890

В файле стилей CSS при этому добавляете:

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

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

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

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

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

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

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

Каждый пункт меню имеет свой конкретный 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 отвечает за конкретный пункт. В итоге получится такое.

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

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

Шрифт 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;
}

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

Шрифт Font Awesome в вордпресс

Я тестировал все три варианта на данном блоге, но к сожалению, вместо иконок у меня выводились какие-то «кракозябры». Вероятно, что-то не так с кодировкой или из-за специфических настроек блога. Однако на другом проекте все иконки отобразились корректно, поэтому код полностью рабочий. Единственное были сложности с примером номер 2 (меню), общие свойства не хотели срабатывать и пришлось прописать font-family: FontAwesome для каждого из пунктов меню.

Зачем вообще нужны Font Awesome и шрифты из иконок? Они легко масштабируемы, поддерживают кроссбраузерность, позволяют легко менять цвета иконки, а также добавлять эффекты (тень и т.п.). К тому же, насколько я понимаю, подгружаются эти элементы быстрее изображений, что экономит вам немного времени при загрузке страницы. В целом, штука достаточно интересная.



Прокомментировать

Новые шаблоны и статьи

Рубрики

Популярные шаблоны

Мы помогаем детям


KosynokBannerNetwork