Как использовать иконочные шрифты в WordPress

Как использовать иконочные шрифты в WordPress
Иконочные шрифты — отличная вещь, так как они могут предложить много вещей, которых нет у обычных значков. Поскольку технически это шрифты, а не изображения, эти символы, сгенерированные из этих шрифтов, не имеют недостатков классических иконок. Цвета и размеры значков шрифтов можно легко контролировать с помощью CSS и HTML. Это означает, что они масштабируемы и могут использоваться для дисплеев Retina. В этой статье мы рассмотрим вопрос о том, как использовать иконочные шрифты в WordPress наилучшим образом.

Как использовать иконочные шрифты в WordPress

Два способа использования иконочных шрифтов в WordPress

Самый известный и самый обширный иконочный шрифт, безусловно, »Отличный шрифт« и это шрифт, который мы будем использовать в этой статье. Font Awesome предоставляет 605 иконок практически для всех мыслимых целей, и его очень легко интегрировать и использовать. Сегодня я познакомлю вас с двумя способами интеграции шрифта — ручной метод и интеграция через плагин.

Важные ссылки:

Шрифт потрясающий

Использование Font Awesome вручную

Использование Font Awesome вручную обеспечивает более высокую производительность. Ваш сайт не замедляется из-за ненужных файлов CSS и JavaScript. Должен быть интегрирован только один файл CSS, который доставляется через CDN-сервер MaxCDN. Конечно, вы также можете загрузить нужные файлы на свой сервер, но интеграция через MaxCDN будет быстрее и эффективнее. Скопируйте следующий код в functions.php вашей темы:

При нажатии на рисунок открывается GitHub Gist.
Шрифт-потрясающий-Эйнбинден

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

Бейшпиль

редактор

Результат:

Дас Эргебнис

Быстрая подсказка:

Кстати, тег на самом деле не нужен, так как он также работает с ,

или

элемент. Настройка цвета может быть легко выполнена с помощью CSS. Размер также можно изменить, просто изменив размер шрифта.

css-иконки

Использование Font Awesome с плагином

Шрифтовой

  • Разработчик(и): Разные
  • Работа в процессе: более или менее
  • Последняя версия от: год назад
  • Совместимость с WordPress 4.4.1: Полная
  • Стоимость: бесплатно на WordPress.org
  • Лицензия: ОБЩАЯ ПУБЛИЧНАЯ ЛИЦЕНЗИЯ GNU
  • Несовместимости: неизвестно
  • Домашняя страница разработчика: неизвестно
  • Скачать с WordPress.org

Преимущество плагина «WP Fontallic Easypromoweb» заключается в том, что помимо Font Awsome он имеет больше встроенных иконочных шрифтов. Этот плагин дает вам доступ к 2553 иконкам. Благодаря визуальному редактору вам не нужно переходить в текстовую область вашего текстового редактора WordPress, так как вы можете легко реализовать значки с помощью дополнительной кнопки в панели меню редактора.

Кнопка для Icon-Fonts

При нажатии кнопки выбора открывается список выбора значков.

Die Auswahl der Icons

Пиктограммы можно дополнительно настроить в зависимости от размера и цвета шрифта. Однако при использовании визуального редактора невозможно назначить значки определенным элементам HTML. Для этого вам нужно вернуться в текстовую область редактора и вручную назначить символы.

Иконки в текстовом редактореDas Ergebnis на веб-сайте

Дополнение: Размещение шрифтов значков на вашем сервере

Два варианта, которые я только что представил, подкупили простотой. Чтобы использовать преимущества шрифта, требуется не так уж много работы. Конечно, вы также можете самостоятельно разместить иконочный шрифт на своем сервере/пакете веб-хостинга. Это, безусловно, необходимо для других шрифтов, кроме 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
Das Font Awesome CSS в заголовке тем

Заключение

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

Те, кто не осмеливается прикасаться к коду, по-видимому, одинаково хорошо обслуживаются с помощью плагина.

(дпе)