Иконочные шрифты: Иконочные шрифты, альтернативы FontAwesome

или

Спасибо, просто скачать
Font Awesome 4

Как легко добавить шрифты значков в вашу тему WordPress

Вы хотите добавить шрифты значков на свой сайт WordPress?

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

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

Что такое иконочные шрифты и почему их следует использовать?

Иконочные шрифты содержат символы или маленькие изображения вместо букв и цифр.

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

Большинство посетителей сразу поймут, что означает часто используемый значок. Таким образом, вы можете помочь посетителям ориентироваться на вашем веб-сайте и взаимодействовать с вашим контентом.

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

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

Существует несколько наборов шрифтов с открытым исходным кодом, которые вы можете использовать бесплатно, например IcoMoon, Genericons и Linearicons.

Фактически, программное обеспечение WordPress поставляется со встроенными бесплатными значками тире. Это значки, которые вы можете увидеть в админке WordPress.

В этом руководстве мы будем использовать Font Awesome, так как это самый популярный набор иконок с открытым исходным кодом. Мы используем его в WPBeginner и во всех наших премиальных плагинах WordPress.

С учетом сказанного давайте посмотрим, как легко добавить иконочные шрифты в тему WordPress. Просто используйте быстрые ссылки, чтобы сразу перейти к нужному методу.

• Способ 1. Добавление шрифтов значков с помощью плагина WordPress (простой)
• Способ 2. Использование шрифтов значков с помощью SeedProd (более настраиваемый)

Способ 1. Добавление шрифтов значков с помощью плагина WordPress (простой)

Самый простой Способ добавления иконочных шрифтов в WordPress — использование плагина Font Awesome. Это позволяет вам использовать иконочные шрифты на ваших страницах и в сообщениях без изменения файлов темы. Вы также будете автоматически получать любые новые значки Font Awesome при каждом обновлении плагина.

Первое, что вам нужно сделать, это установить и активировать плагин Font Awesome. Для получения более подробной информации см. наше пошаговое руководство по установке плагина WordPress.

После активации вы можете добавить значок Font Awesome к любому блоку шорткода. Просто откройте страницу или сообщение, где вы хотите отобразить шрифт значка, а затем нажмите значок «+».

Теперь вы можете искать «Шорткод» и выбирать нужный блок, когда он появляется.

После этого вы можете добавить любую иконку Font Awesome, используя следующий шорткод:

[имя значка = "ракета"]
 

В появившемся всплывающем окне щелкните имя значка.

Теперь Font Awesome автоматически копирует имя в буфер обмена.

После этого просто вставьте имя в шорткод. Теперь вы можете нажать «Опубликовать» или «Обновить», чтобы активировать шрифт значка.

Иногда может потребоваться отобразить значок шрифта внутри блока текста. Например, вам может потребоваться отобразить символ «авторское право» после названия бренда.

Для этого просто вставьте шорткод в любой блок абзаца.

Затем вы можете использовать настройки в правом меню, чтобы настроить значок, подобно тому, как вы настраиваете параметры для текстовых блоков. Например, вы можете изменить размер шрифта.

WordPress превратит шорткод в значок Font Awesome для посетителей и покажет его рядом с вашим текстом.

Другой вариант — добавить шорткод в любую область, готовую для виджетов.

Например, вы можете добавить блок шорткода на боковую панель вашего сайта или в аналогичный раздел.

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

Вы даже можете добавить шорткод значка к столбцам и создать красивые блоки функций.

Подробные инструкции см. в нашем руководстве о том, как добавить блоки функций со значками в WordPress.

Многие веб-сайты используют иконочные шрифты в своих меню, чтобы помочь посетителям сориентироваться. Чтобы добавить значок, создайте новое меню или откройте существующее меню на панели управления WordPress.

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

Затем нажмите «Параметры экрана» и установите флажок рядом с «Классы CSS».

Теперь вы должны увидеть новое поле «Классы CSS».

Чтобы получить класс CSS значка, просто найдите шрифт значка на веб-сайте Font Awesome и щелкните по нему. Если вы хотите, вы можете изменить стиль значка, щелкнув различные настройки.

Во всплывающем окне вы увидите фрагмент кода HTML. Класс CSS — это просто текст в кавычках. Например, на следующем изображении класс CSS — fa-solid fa-address-book .

Просто скопируйте текст внутри кавычек, а затем вернитесь в панель управления WordPress.

Теперь вы можете вставить текст в поле «Классы CSS».

Чтобы добавить дополнительные шрифты значков, просто выполните описанный выше процесс.

Когда вы довольны тем, как настроено меню, нажмите «Сохранить». Теперь, если вы посетите свой веб-сайт WordPress, вы увидите обновленное меню навигации.

Способ 2. Использование шрифтов значков с SeedProd (более настраиваемый)

Если вы хотите больше свободы в выборе места использования значков шрифтов, мы рекомендуем использовать плагин компоновщика страниц.

SeedProd — лучший на рынке инструмент для создания страниц WordPress с функцией перетаскивания, в который встроено более 1400 значков Font Awesome. Он также имеет готовое поле значков, которое вы можете добавить на любую страницу с помощью перетаскивания.

С помощью SeedProd легко создавать собственные страницы в WordPress, а затем отображать значки Font Awesome в любом месте на этих страницах.

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

Примечание:  Существует бесплатная версия SeedProd, но мы будем использовать версию Pro, так как она поставляется с коробкой Icon.

После активации перейдите в SeedProd » Настройки и введите лицензионный ключ.

Вы можете найти эту информацию в своей учетной записи на веб-сайте SeedProd. После ввода лицензионного ключа нажмите кнопку «Подтвердить ключ».

Затем вам нужно посетить SeedProd » Pages  и нажать кнопку «Добавить новую целевую страницу».

Теперь вы можете выбрать шаблон, который будет использоваться в качестве основы для вашей страницы. SeedProd имеет более 180 профессионально разработанных шаблонов, которые вы можете настроить в соответствии с потребностями вашего блога WordPress или веб-сайта.

Чтобы выбрать шаблон, наведите на него указатель мыши и щелкните значок «Галочка».

Мы используем шаблон «Страница продаж электронных книг» во всех наших изображениях, но вы можете использовать любой дизайн, какой захотите.

Далее введите имя пользовательской страницы. SeedProd автоматически создаст URL-адрес на основе заголовка страницы, но вы можете изменить этот URL-адрес на любой другой.

Когда вы будете довольны введенной информацией, нажмите кнопку «Сохранить и начать редактирование страницы».

Далее вы попадете в конструктор страниц SeedProd с функцией перетаскивания, где вы сможете настроить шаблон.

Редактор SeedProd показывает предварительный просмотр вашего дизайна в реальном времени справа и некоторые настройки блока слева.

В левом меню также есть блоки, которые вы можете перетаскивать в свой дизайн.

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

Чтобы настроить любой блок, просто нажмите, чтобы выбрать его в макете.

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

Чтобы добавить значок шрифта на страницу, просто найдите блок «Значок» в левом столбце и перетащите его на макет.

SeedProd по умолчанию отображает значок «стрелка».

Чтобы отобразить вместо этого другой значок Font Awesome, просто щелкните, чтобы выбрать блок значков.

В левом меню наведите указатель мыши на значок, а затем нажмите кнопку «Библиотека значков», когда она появится.

Теперь вы увидите все различные значки Font Awesome, которые вы можете выбрать.

Просто найдите значок шрифта, который хотите использовать, и щелкните по нему.

Теперь SeedProd добавит значок в ваш макет.

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

Вы можете продолжить работу со страницей, добавив дополнительные блоки и настроив эти блоки в меню слева.

Если вас устраивает внешний вид страницы, нажмите кнопку «Сохранить». Затем вы можете выбрать «Опубликовать», чтобы сделать эту страницу активной.

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

Если вам понравилась эта статья, подпишитесь на наш YouTube-канал для видеоуроков по WordPress. Вы также можете найти нас в Твиттере и Facebook.

Stop Use Icon Fonts by Michael Irigoyen

Всего за год до того, как в 1991 году была запущена первая веб-страница, Microsoft начала поставки, возможно, самого известного шрифта значков, Wingdings . Однако прошло почти 22 года, прежде чем иконочные шрифты стали тенденцией дизайна в Интернете.

Введение правила CSS @font-face позволило веб-дизайнерам указывать собственные шрифты для отображения текста. К 2011 году его поддерживали все основные браузеры. Это породило идею о том, что шрифты, состоящие из пиктограмм, например, Wingdings можно использовать вместо растровых изображений в Интернете. Учитывая, что реальная поддержка SVG во всех основных браузерах не была стабильной до начала 2020 года, иконочные шрифты де-факто были способом добавления векторных значков на ваш веб-сайт.

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

Flawed Icon Fonts

Flash of Unstyled Content (FOUC)

При использовании @font-face вы указываете браузеру сделать HTTP-запрос для требуемого файла шрифта. Этот запрос также не отправляется немедленно. Когда браузер начинает анализировать HTML и все связанные файлы, на которые есть ссылки в разметке, он строит объектную модель документа (DOM) в реальном времени. Когда связанный шрифт найден, запрос запускается. Время, необходимое для извлечения шрифта, может зависеть от размера ресурса шрифта, условий сети и аппаратного обеспечения пользователя.

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

Примечание : можно использовать более новые директивы, такие как preload , для ресурсов шрифтов, чтобы избежать FOUC. Однако это не решает всех других проблем, определенных в этой статье, и не рекомендуется.

Специальные возможности

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

1. Обрабатывается как текст — Браузер обрабатывает шрифты как текст, потому что именно такими шрифты и должны быть. Программы чтения с экрана с годами становятся все умнее, но им все еще трудно отличить разборчивый текст от пиктограммы. Большинство программ чтения с экрана читают вслух текст, вставленный с помощью CSS, поэтому, когда они натыкаются на ваши значки, они могут сказать «непроизносимо» или могут быть полностью пропущены.

2. Таблица стилей переопределяет — люди с нарушениями зрения часто используют пользовательские таблицы стилей для переопределения стилей по умолчанию посещаемых ими веб-сайтов, чтобы упростить их использование. Это может включать изменение цветовых схем, увеличение размера или веса шрифта или даже полное изменение начертания шрифта. Если ваш сайт использует значки вне контекста, кто-то, использующий вспомогательный шрифт (например, OpenDyslexic), заменит ваши значки и полностью исчезнет, ​​что может привести к тому, что ваш веб-сайт станет непригодным для использования.

3. Невозможно предоставить метаданные — Процесс внедрения иконочного шрифта в Интернете требует использования псевдоэлементов ::before или ::after . Семантически псевдоэлементы ::before и ::after предназначены для добавления косметического содержимого к существующему элементу. Для иконочных шрифтов это имеет смысл, если иконка используется в контексте с другим элементом. Однако во многих случаях значок используется в качестве основного фокуса. Например, «x» для «закрыть» или дом для возвращения «домой». Сами по себе эти значки не предоставляют никакой семантической информации о своем содержимом; Вы не можете пометить их или описать напрямую.

Размер и ремонтопригодность

Иконочные шрифты недешевы. Каждый раз, когда посетитель загружает ваш иконочный шрифт, он загружает каждую иконку, которую вы собираетесь использовать в любом месте вашего сайта, независимо от того, видят они их все или нет. Один только этот факт делает иконочные шрифты сложными и довольно раздражающими в обслуживании. Если ваш иконочный шрифт содержит 200 иконок, а вы используете 10 из них, вы вынуждаете своих посетителей загружать 190 иконок, которые они никогда не увидят. Это ухудшит впечатление от вашего посетителя, увеличив время загрузки и расширив FOUC.

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

Ухудшение визуального качества

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

Трудно стилизовать/позиционировать

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

SVG спешат на помощь!

С выпуском версии браузера Microsoft Edge на платформе Chromium в начале 2020 года масштабируемая векторная графика (SVG) стала полностью поддерживаться во всех основных браузерах. Даже до этого SVG поддерживались во всех браузерах с 2012 года, хотя и с некоторыми оговорками относительно масштабирования в Internet Explorer и до Chromium Edge. И угадай что? SVG потрясающие для веб-иконок!

Icons Just Work

Данные изображения SVG хранятся непосредственно в HTML-документе. Как только браузер его обрабатывает, он отображает его. Вам не нужно ждать завершения других HTTP-запросов, как в случае с иконочным шрифтом.

Лучшая доступность

SVG имеют встроенные специальные возможности, которые дают им преимущество перед использованием шрифтов-иконок.

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