Использование иконок шрифта Font Awesome в WordPress
Font Awesome — это один из тех шрифтов, где вместо букв содержатся разные иконки: начиная от каких-то системных изображений по типу галочек, звездочек, папок и заканчивая иконками смартфонов, автомобилей, техники и т.п. При подключении шрифта на сайт вы можете использовать и размещать их на страницах своего веб-проекта. Сегодня рассмотрю пару базовых примеров дабы вы поняли зачем это нужно, как выглядит и как реализуется. Использовать мы будем шрифт Font Awesome хотя подобных бесплатных шрифтов с иконками есть несколько.
Итак, для его подключения шрифта нужно в файл функций functions.php добавить следующий код:
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' ); function enqueue_font_awesome() { wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' ); } |
Ну, а теперь перейдем к примерам. Я взял их из этой статьи вместе со скриншотами, надеюсь автор будет не против:)
Использование Font Awesome в тексте
В текстовом редакторе переключаетесь в обычный HTML режим. Там пишете код, указанный ниже, и сохраняете текст, не переходя в визуальный режим:
<i class="fa fa-phone"></i> +91 1234567890 |
В файле стилей CSS при этому добавляете:
.fa-phone { font-size: 25px; vertical-align: middle; padding-right: 5px; } |
В итоге получится такая иконка возле текста:
Список всех иконок найдете тут возле каждой из них увидите название класса, что сможете использовать. Единственное, что перед ним обязательно нужно указывать также и класс fa (см. код примера выше).
Font Awesome в меню
Использование данного шрифта — один из вариантов подключения иконки в меню WordPress. Здесь нужно внимательно изучить 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; } |
В итоге возле заголовка выводится иконка.
Я тестировал все три варианта на данном блоге, но к сожалению, вместо иконок у меня выводились какие-то «кракозябры». Вероятно, что-то не так с кодировкой или из-за специфических настроек блога. Однако на другом проекте все иконки отобразились корректно, поэтому код полностью рабочий. Единственное были сложности с примером номер 2 (меню), общие свойства не хотели срабатывать и пришлось прописать font-family: FontAwesome для каждого из пунктов меню.
Зачем вообще нужны Font Awesome и шрифты из иконок? Они легко масштабируемы, поддерживают кроссбраузерность, позволяют легко менять цвета иконки, а также добавлять эффекты (тень и т.п.). К тому же, насколько я понимаю, подгружаются эти элементы быстрее изображений, что экономит вам немного времени при загрузке страницы. В целом, штука достаточно интересная.
комментариев 25 к статье “Использование иконок шрифта Font Awesome в WordPress”
Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!
Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:
- Вкладки в Woocommerce товарах — как убрать, добавить, изменить (сниппеты + плагин)
- Вывод Woocommerce товаров на странице с Elementor с помощью плагина
- Проблема с адаптивными изображениями в Gutenberg редакторе WordPress
- Хаки для страницы категории в WooCommerce
- Топ-5 плагинов для обеспечения безопасности WordPress сайтов
- Friend Hosting — создание WP сайта в один клик, обзор панели управления и плюсов хостера
- Размеры изображений в WordPress — как изменить, добавить свои и удалить лишние
- WooCommerce (44)
- Безопасность (12)
- Видео (6)
- Виджеты (28)
- Возможности (141)
- Вопрос-ответ (6)
- Начинающим (52)
- Новости (46)
- Оптимизация (23)
- Плагины (244)
- Сервисы (85)
- Хаки и секреты (87)
- Шаблоны (44)
- Записи и посты wordpress, оформление записи
(5,91 из 7, голосов - 47)
- Умный копирайт в footer.php для wordpress
(5,63 из 7, голосов - 30)
- Обновление плагинов и тем в WordPress: автоматическое, через FTP, скрытие уведомлений
(5,13 из 7, голосов - 30)
- Проблема с адаптивными изображениями в Gutenberg редакторе WordPress
(4,08 из 7, голосов - 36)
- Polylang — плагин для мультиязычных сайтов на нескольких языках в WordPress
(4,33 из 7, голосов - 30)
- Рубрики и категории wordpress, функция wp_list_categories
(6,05 из 7, голосов - 20)
- Иконки в меню WordPress — добавляем вручную и с плагином
(4,75 из 7, голосов - 24)

- Дизайн Мания - о веб-дизайне и не только.
- Tod's Blog - все про заработок онлайн.
- Вебдванольные заметки - обзоры веб-сервисов.
- Топ-3 видеокарты среднего класса от AMD: зачем платить больше?
- Доработка фильтра для повышения конферсии
- Зачем нужен домен
- Переваги застосування технології розумний будинок
- Дизайн сайта
- DLE (DataLife Engine) — движок для сателлитов
- Играть бесплатно в игровые автоматы без регистрации
- Продвижение сайта через социальные сети
Отличная статья! Спасибо! Вопрос: как сделать тоже самое, но без php? У меня простенький сайт, файлы *.html.
Maxim, посмотрите на сайте Font Awesome разделы «Get Started» и «Examples» — там будет информация о подключении иконок на свой сайт, все реализуется через CSS.
Тод, понял. Отказался от идеи. ВП виснет из-за долгой загрузки удалённого css.
Я пользуюсь «Fontello — icon fonts generator» он лучше тем, что можно выбирать какие именно иконки тебе нужны, и загружать только их, а не всю базу, да и шрифт лежит по умолчанию на твоём блоге. Хотя конечно нужно проделать лишние действия, это оттолкнёт некоторых веб-мастеров.
Здравствуйте!
Не могу определить какой класс отвечает за определенный пункт рубрики (использую Firebug для Firefox)
Вроде понял что это class=»cat-item cat-item-55″>
Прописываю в CSS вот такой код:
.cat-item cat-item-55:before {
font-family: FontAwesome;
content: «f07c»;
color:#ff0000;
}
Не работает! Что не так делаю?
Марат, если что-от не работает желательно тестить в редакторе или в том же фаербаге разные варианты. У меня получилось при использовании конструкции: li.cat-item.cat-item-55::before
Я и тестил разные варианты. Ваш вариант тоже не работает…
Марат, странно. Поставьте в качестве content другие варианты, у меня было «…» и сработало. Возможно проблема не в CSS, а в подключении Font Awesome.
Как вариант, найти в стилях код, который сейчас используется для вывода иконок перед списком категорий и попытаться модифицировать его.
Поменял content на «f05a»/
Font Awesome я уверен подключен по умолчанию, так как просто на тестовой странице конструкция fa-camera-retro работает.
Поменял вашу конструкцию на: .cat-item.cat-item-55:before {
Меняется только цвет иконки по умолчанию (можете сейчас посмотреть).
Модифицировать код не могу, так как тема WordPress периодически обновляется…
Марат, добавьте !important для content дабы перекрыть стиль оригинальной темы.
Сделал вот так:
.cat-item.cat-item-55:before {
font-family: FontAwesome;
content: «\f05a» !important;
color:#ff0000;
}
Не работает.
Марат, я смотрю через инспектор в браузере, у меня пишет — некорректное значение свойства для content. Значение отображается как «». Меняю на «…» — срабатывает. Кавычки правильные? редактируете онлайн на сайте? кодировка файла utf?
Да, дело было в кавычках! Спасибо большое!
Теперь желательно прописать до этого код как у Вас в примере. Чтобы не прописывать каждый раз font-family: FontAwesome для каждой иконки.
Марат, кстати, если вам нужны одинаковые иконки для всех категорий, то пропишите просто код для класса cat-item (он только в категориях, вроде бы, и присутствует).
Спасибо! Но хочу использовать разные иконки, если подберу под названия своих рубрик :)
Хотел подписаться на Ваш блог, не нашел где…
Марат, можете найти ссылки для подписки в конце статьи или сверху сайдбара. Либо вот линк на подписку по почте.
Да, спасибо, подписался.
Как увеличить размер этих иконок можете подсказать?
Цвет у иконок какой-то светлый, хотя принудительно ставлю черный цвет. Хотя может быть так оставить? Как думаете?
Еще хотелось бы порядок сортировки рубрик другой. Придется наверное плагин сортировки ставить какой нибудь…
Марат, цвета и размеры текста — все это делается в CSS. Если цвет не меняется, то возможно вы указываете его не для того элемента. Нужно изучать имеющиеся стили. Если нужен произвольный порядок сортировки, то проще всего использовать меню.
Если нужен произвольный порядок сортировки, то проще всего использовать меню…
Нужно будет какие то изменения вносить в файлы темы?
Марат, да нужно. Там по ссылке есть описание установки меню.
Мне нельзя вносить изменения в файлы темы, так как она периодически обновляется…
Марат, тогда можно воспользоваться виджетом «Произвольное меню», он позволяет добавить в шаблон созданное меню в админке.
Не подскажите как сделать что бы редактор текста в визуальном режиме не удалял код иконок?
Beleduc, к сожалению, не знаю. Визуальный режим, как правило, удаляет все коды, такова его работа. Нужно гуглить что-то по этой теме в англоязычном интернете, я наших блогах такие статьи не встречал.