Два способа использования иконочных шрифтов в WordPress
Самый известный и самый обширный иконочный шрифт, безусловно, »Отличный шрифт« и это шрифт, который мы будем использовать в этой статье. Font Awesome предоставляет 605 иконок практически для всех мыслимых целей, и его очень легко интегрировать и использовать. Сегодня я познакомлю вас с двумя способами интеграции шрифта — ручной метод и интеграция через плагин.
Важные ссылки:
Использование Font Awesome вручную
Использование Font Awesome вручную обеспечивает более высокую производительность. Ваш сайт не замедляется из-за ненужных файлов CSS и JavaScript. Должен быть интегрирован только один файл CSS, который доставляется через CDN-сервер MaxCDN. Конечно, вы также можете загрузить нужные файлы на свой сервер, но интеграция через MaxCDN будет быстрее и эффективнее. Скопируйте следующий код в functions.php вашей темы:
При нажатии на рисунок открывается GitHub Gist.
Это все, что нужно для использования шрифта. Если вы хотите отобразить значок, перейдите на веб-сайт Font Awesome и посмотрите примеры, чтобы привыкнуть к его использованию. Вы заметите, что эти значки можно изменять и использовать по-разному. Вы можете просто определить размер пиктограмм с помощью HTML, который вы можете ввести в текстовом представлении редактора WordPress:
Результат:
Быстрая подсказка:
Кстати, тег на самом деле не нужен, так как он также работает с ,
или
Использование Font Awesome с плагином
- Разработчик(и): Разные
- Работа в процессе: более или менее
- Последняя версия от: год назад
- Совместимость с WordPress 4.4.1: Полная
- Стоимость: бесплатно на WordPress.org
- Лицензия: ОБЩАЯ ПУБЛИЧНАЯ ЛИЦЕНЗИЯ GNU
- Несовместимости: неизвестно
- Домашняя страница разработчика: неизвестно
- Скачать с WordPress.org
Преимущество плагина «WP Fontallic Easypromoweb» заключается в том, что помимо Font Awsome он имеет больше встроенных иконочных шрифтов. Этот плагин дает вам доступ к 2553 иконкам. Благодаря визуальному редактору вам не нужно переходить в текстовую область вашего текстового редактора WordPress, так как вы можете легко реализовать значки с помощью дополнительной кнопки в панели меню редактора.
При нажатии кнопки выбора открывается список выбора значков.
Пиктограммы можно дополнительно настроить в зависимости от размера и цвета шрифта. Однако при использовании визуального редактора невозможно назначить значки определенным элементам HTML. Для этого вам нужно вернуться в текстовую область редактора и вручную назначить символы.
Дополнение: Размещение шрифтов значков на вашем сервере
Два варианта, которые я только что представил, подкупили простотой. Чтобы использовать преимущества шрифта, требуется не так уж много работы. Конечно, вы также можете самостоятельно разместить иконочный шрифт на своем сервере/пакете веб-хостинга. Это, безусловно, необходимо для других шрифтов, кроме Font Awesome. Вот почему мы еще раз пройдемся по шагам. Во-первых, вам нужно загрузить соответствующий пакет загрузки, например, Font Awesome.
Впоследствии файл .ZIP распаковывается. Папка «fonts», содержащая необходимые шрифты, загружается в корневой каталог активной темы через (S)FTP. «font-awesome.css» вынимается из папки «css». Пути данных к шрифтам в папке шрифтов все еще необходимо настроить на (пример) url('fonts/fontawesome-webfont.eot?v=4.5.0');. Затем CSS помещается в корневой индекс темы и упоминается в ее заголовке. Это происходит из-за следующей записи в functions.php темы:
Щелчок по изображению открывает GitHub Gist
Заключение
Иконочные шрифты — отличное изобретение, и мне нравится их использовать. Мой фаворит — Font Awesome, особенно потому, что мне нужно интегрировать только один файл через CDN. На мой взгляд, плагин не имеет особого смысла, так как ручное использование быстрее, и вам нужно только перейти в текстовую область текстового редактора, чтобы назначить значки для списков, кнопок и тому подобных вещей.
Те, кто не осмеливается прикасаться к коду, по-видимому, одинаково хорошо обслуживаются с помощью плагина.
(дпе)