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

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

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

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

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

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