Руководство по использованию иконочных шрифтов в WordPress

Дата публикации:Октябрь 12, 2015

Раньше найти иконки не составляло никаких проблем, однако применить их было сложнее, чем сегодня. Избежать некоторых проблем можно было при помощи обращения к спрайтам, однако они не всегда являлись шагом вперед, и когда появились retina-дисплеи, эти проблемы только усугубились.

icon_fonts

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

Где найти иконочные шрифты

Просто введите «icon font» в Google, и вы получите великолепные результаты, среди которых моим фаворитом является FontAwesome. В данный момент он содержит 585 иконок, которые включают в себя интерфейсные и социальные иконки, стрелки и т.д.

icons_primer

Fontello – еще один хороший сервис, который позволяет вам найти и подключить иконочные шрифты. Как я уже упоминал ранее, иконочные шрифты имеют отдельный файл, font face, для добавления иконок. Преимущество Fontello состоит в том, что вы можете впоследствии оптимизировать свою коллекцию иконок, создав файлы шрифтов, содержащие только необходимые вам иконки.

Это позволит вам снизить размер файла от 150 Кб всего до нескольких килобайтов, что очень удобно. И что еще лучше: вы можете смешивать иконки из разных наборов шрифтов в одном файле.

Включение иконочных шрифтов в ваш проект

Чтобы использовать иконочный шрифт, необходимо добавить файл к своему проекту, использовать CSS для загрузки font face, после чего создать необходимую разметку для вывода иконок в корректном месте. Давайте взглянем на простую ручную реализацию, которая может использоваться в любой системе.

Несмотря на то что ваш сайт будет загружать отдельный файл, вы фактически получите несколько форматов файла для каждого шрифта, что сделано с целью совместимости с некоторыми браузерами. FontAwesome предлагает 6 базовых файловых форматов: eot, svg, ttf, woff, woff2 и otf. Ваша первая задача – добавить эти файлы к вашему проекту (обычно в папку со шрифтами).

Затем вам нужно будет добавить CSS-файл FontAwesome к вашему проекту и привязать его к сайту при помощи обычного link элемента.

<link rel="stylesheet" href="css/font-awesome.min.css">

Если вы взглянете в обычную, неминифицированную версию файла, вы поймете, что с ним произошло. Сначала загружаются файлы шрифта, затем определяется базовый элемент с классом .fa (наряду с некоторыми другими), и, наконец, определяются все иконки (к примеру, .fa-book).

Единственное, чему следует уделить внимание – это путь к файлам вашего шрифта. По умолчанию они загружаются из папки ../fonts, которая стоит чуть выше по вложенности (ближе к корню) от папки с текущим CSS-файлом. Вам, возможно, понадобится изменить этот путь, чтобы он соответствовал вашей структуре папок.

Как только вы сделаете все это, вы можете подключить шрифты, добавив разметку к своему сайту:

<i class="fa fa-fire"></i>

FontAwesome имеет встроенную поддержку разных размеров иконок, вращения иконок, вывода цитат с кавычками или изображениями, и т.д. Взгляните на страницу с примерами, чтобы познакомиться со всеми возможностями и получить базовую разметку для них.

Помните, что вы можете использовать любой элемент, не только i. Вы можете использовать обычные span элементы наряду с добавлением CSS к вашим произвольным классам.

Проблемы с доступностью

Один из недостатков иконочных шрифтов – их ужасная доступность. Программы чтения с экрана могут пропустить их или, что еще хуже, считать Unicode или прочесть сам символ. Все это выльется для слабовидящих людей в нечто подобное: они услышат «желтая звезда избранное», когда наведут на пункт меню с Избранным, что, естественно, не является самым идеальным решением. Вы должны также рассмотреть ситуацию, когда шрифты по каким-либо причинам не загрузятся.

В идеале нам нужно, чтобы декоративные иконки просто исчезли, если они не были загружены, а критические иконки были заменены текстом.

Проблемы с доступностью очень просто решить – для этого достаточно использовать параметр aria-hidden=»true» и значение, которое будет указывать программам чтения с экрана о том, что данный элемент следует отбросить.

<span class="icon icon-star" aria-hidden="true"></span> My Favourites

В более серьезных реализациях вы можете также использовать Modernizr, чтобы протестировать поддержку font face. Вам нужно будет несколько изменить CSS – для этого обратитесь к статье Bulletproof Font Icons, чтобы получить дополнительную информацию.

Я также рекомендую обратиться к этой статье, если вам требуется информация о создании важных иконок с откатом к тексту. Реализация этого действия выходит за рамки нашей статьи.

Иконочные шрифты в WordPress

Есть три способа использования иконочных шрифтов в WordPress. Вы можете подключать свои собственные шрифты к вашей теме или плагину, использовать встроенный набор Dashicons или использовать плагин, который позволит вам получить доступ к требуемым иконкам. Давайте рассмотрим все три способа.

Добавление своих собственных шрифтов

Процесс очень похож на ручной способ, но за одним исключением: мы будем использовать постановку в очередь WordPress для добавления нашего CSS-файла. Давайте добавим следующий код к файлу functions.php своей темы, чтобы получить доступ к FontAwesome (не забудьте добавить файлы шрифта).

function my_theme_styles() {
	wp_enqueue_style( 'FontAwesome', get_template_directory_uri() . '/css/font-awesome.min.css' );
}

add_action( 'wp_enqueue_scripts', 'my_theme_styles' );

Использование Dashicons

Иконки Dashicons включены по умолчанию в WordPress и используются в бэкэнде. Вам нужно поставить их в очередь во фронтэнде; при этом вам нужно лишь указать название скрипта, сам файл уже доступен в WordPress:

function my_theme_styles() {
	wp_enqueue_style( 'dashicons' );
}

Затем вы можете перейти к сайту Dashicons, выбрать заинтересовавшую вас иконку и щелкнуть по ссылке «copy HTML», вследствие чего вы получите код, который требуется для вывода иконки на сайте:

<span class="dashicons dashicons-no"></span>

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

Есть масса плагинов для добавления иконочных шрифтов в WordPress. Один из таких плагинов — FontAwesome.io Shortcodes. После его установки и активации вы сможете использовать конструкцию вида [ fa icon=»» ] (без пробелов) для добавления иконки в любом месте вашего контента.

Это — прекрасное решение, если вы хотите позволить вашим клиентам добавлять иконки в записи и страницы. Однако если вы хотите также использовать эти элементы в своей теме или в плагине, лучше всего поставить их в очередь самостоятельно.

Заключение

Про иконочные шрифты всё. Да, пока они еще имеют проблемы с доступностью, однако вы уже можете уверенно их использовать. Я рекомендую вам использовать Fontello для создания иконочного шрифта, который будет содержать только необходимые вам иконки. Это сделает вашу тему более оптимизированной.

Если у вас есть любимый иконочный шрифт, который отличается от FontAwesome, дайте знать об этом в комментариях!

Источник: https://kinsta.com

Поделиться

6 комментариев

  1. Ivan S says:

    Слушай, Дима привет. Как тебе удается штамповать столько контента? Подскажешь?)))

    • Дмитрий says:

      Приветствую. Разве это много?
      Много — это если бы каждый день по статье. А так, считаю, вполне адекватное количество.

  2. bersy says:

    По мне лучше не обо всем подряд, а о том, что сам автор действительно посчитал нужным и перевел на русский, ведь, насколько я понимаю, делает это он сам. Специально захожу на сайт наверное пару раз в месяц, и наоборот рад что новостей не много. Просматриваю их за пару минут, в основном по WP, нередко, однако, среди них находятся и те, которые по-быстрому прочитываю (или добавляю в «посмотреть позднее…»), вот в это раз про FontAwesome, например, за что и спасибо.

  3. bersy says:

    Кстати, Дмитрий, вопрос не по теме. Помню когда-то много лет назад видел у вас на сайте статью о внутренних ссылках WP через шорткоды. Помню, что делалось это посредством добавления функции в functions.php. Использовал тогда этот способ на своем сайте, а сейчас пытался найти и не смог.

    Вообще, мне сейчас нужен не обязательно тот способ, да и устарел он уже, возможно и не работает как раньше. Просто не совсем устраивает стандартное средство WP добавление ссылок, так как я изредка, но все же меняю урлы материалов. Я понимаю, что автоматом редиректится, но я не хочу редиректов, поэтому хотелось бы завязку на постоянный ID или как-то так, а не на изменяемый slug. И желательно без плагинов.

    А как как вы ссылаетесь на прежде опубликованные материалы? Какой-то плагин?

    • Дмитрий says:

      Обычно все это реализуется через редиректы.

      Самый простой способ — вот такой плагин, к примеру: https://wordpress.org/plugins/redirection/.

      Много чего умеет, отслеживает появление 404 и т.д.

      Я ставлю обычные ссылки WordPress, поскольку URL’ы и слаги не трогаю.

      Как реализовать завязку на ID — возможно, что пробовать получать ссылки через

      http://codex.wordpress.org/Function_Reference/url_to_postid

      Функция позволяет получить ID записи на основе ее URL. Далее уже делать привязку к этому ID и формировать ссылки. Все это, конечно, будет довольно сложно, могут появиться разные неожиданные моменты — обработка записей в custom post types, обработка URL вложений, проблемы с rewrite rules и т.д.

  4. The Ride says:

    Еще есть сервис IcoMoon – он является еще одним популярным решением, позволяющим использовать иконочные шрифты. Данная библиотека содержит два комплекта иконок: один является бесплатным, другой относится к премиум классу. В зависимости от выбранного комплекта, количество и формат доступных иконок будет отличаться. Например, количество иконок для бесплатного комплекта составляет 450, а для платного –1266.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.