Что такое иконочный шрифт и как применить его на сайте?

Автор:
(Людмила Лунева)

Веб-дизайнер и разработчик сайтов на wordpress

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

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

А ведь иконки, это не просто кнопки социальных сетей, этот один из важных элементов сайта, которые позволяют сделать его дизайн стильным.
Представьте себе, что на вашем сайте все иконки - страниц, категорий, количества комментариев, количества просмотров, обозначение времени, а также, социальные кнопки выполнены в одном стиле!

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

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

Такие шрифты позволяют минимальными усилиями оформить свой сайт в одном стиле.

Плюсы иконочных шрифтов по сравнению с изображениями:

  1. К ним можно применить любое свойство CSS: указать размер, цвет, фон, тень, градиент, псевдо-классы :hover, :focus - оформить, как угодно.
  2. Их можно анимировать.
  3. Они масштабируются – их можно уменьшать или увеличивать без потери качества, поэтому они корректно отображаются, как на стандартных, так на Retina-дисплеях.
  4. По сравнению с графикой, они быстрее загружаются.
  5. Для загрузки иконочных шрифтов браузер посетителя отправит один HTTP запрос, что выгодно отличает их от загрузки рисованных иконок. Чем меньше картинок на сайте, тем меньше запросов к серверу, а значит, скорость загрузки ваших страниц будет быстрее.
  6. Они поддерживаются всеми браузерами (даже очень старыми версиями).

Иконочные шрифты включают большие наборы иконок различной тематики. Таких шрифтов существует очень много – достаточно ввести в поиск слова «icon font», чтобы получить как минимум десяток.

Содержание:

  1. 1. Обзор иконочных шрифтов начнем с Dashicons wordpress
  2. 2. Иконки Font Awesome
  3. 3. Плагины, помогающие добавить иконочные шрифты на сайт

↑ 1. Обзор иконочных шрифтов начнем с Dashicons wordpress

Многие пользователи wordpress не знают, что он содержит пакет иконок Dashicons (начиная с версии 3.8), включающий около 150 векторных иконок 15и категорий:

1. Admin Menu;
2. Welcome Screen;
3. Post Formats;
4. Media;
5. Image Editing;
6. TinyMCE;
7. Posts Screen;
8. Sorting;
9. Social;
10. WordPress.org Specific: Jobs, Profiles, WordCamps;
11. Products;
12. Taxonomies;
13. Widgets;
14. Notifications;
15. Misc.

Конечно, 150 иконок – это не так много, но среди них могут найтись нужные вам.

Как подключить Dashicons?

Вставьте в низ файла functions.php вашей темы этот код:

function my_dashicons() {
    wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'my_dashicons' );

Dashicons можно использовать в HTML коде при помощи классов dashicons и dashicons-*:

Выберите здесь подходящую иконку и нажмите на нее. Она появится в верхней части страницы, а рядом вы увидите название классов этой иконки, например «dashicons-facebook».

Откройте тот файл, куда вы планируете ее добавить, например, для иконок социальных сетей это будет файл single.php, и вставьте следующую конструкцию (после функции the_content();):

<a href="https://www.facebook.com/ваша-страница">
    <span class="dashicons dashicons-facebook"></span>
    Facebook
</a>

После сохранения страницы с постом, вместо span появится иконка соц.сети Facebook. Ее стандартный размер по умолчанию 16×16 пикселей, но его можно увеличить с помощью CSS.

Так же легко можно создать иконки других соц. сети, например Google+ или Twitter:

<a href="https://plus.google.com/ваша-страница">
    <span class="dashicons dashicons-googleplus"></span>
    Google +
</a>
<a href="https://twitter.com/ваша-страница">
    <span class="dashicons dashicons-twitter"></span>
    Twitter
</a>

Вот, что у нас получилось:

Иконочный шрифт для кнопок социальных сетей

В качестве ссылки укажите адрес вашей страницы в этих социальных сетях.

Вы, также, можете добавить Dashicons к вашим элементам с помощью селектора :before в CSS:

<a href=" https://www.facebook.com/ваша-страница" class="facebook-icon"> Facebook</a>
 
<style>
    .facebook-icon:before {
        content: "\f305";
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        font: normal 20px/1 'dashicons';
        vertical-align: top;
    }
</style>

К каждой иконке нужно добавить свой класс, а в параметр content для него вставить код, который указан под иконкой на сайте https://developer.wordpress.org/resource/dashicons/

Иконочному шрифту можно задать любой цвет, добавив параметр color, например так: color: #237DA5;

Пример Dashicons WordPress

А также придать любой вид, например, такой:

Оформление DashIcons в wordpress

Или такой:

Пример оформления DashIcons в wordpress

Но, это уже тема отдельного поста.

Dashicons wordpress удобны тем, что они уже встроены в движок, но пока выбор их не велик.
Мне больше нравится иконочный шрифт FontAwesome – официальный сайт http://fontawesome.io/ или русская версия сайта http://fontawesome.ru/.

↑ 2. Иконки Font Awesome

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

Шрифт Font Awesome содержит около 360 иконок и регулярно пополняется новыми.

Иконки разбиты на группы:

  1. Веб-приложения.
  2. Валюты и деньги.
  3. Текстовые редакторы.
  4. Указатели.
  5. Видео-плееры.
  6. Бренды.
  7. Медицинская тематика.

Как подключить Font Awesome?

Вариант 1. Можно вставить прямую ссылку на шрифт в файл header.php, между тегами head - /head:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">

Вариант 2.Можно скачать шрифт Font Awesome с официального сайта, загрузить на свой сайт, указав путь к папке со шрифтом на вашем сервере:

<link href="путь_до_папки/font-awesome/css/font-awesome.min.css" rel="stylesheet">

Вариант 3: А самым правильным будет подключить Font Awesome в файле functions.php:

        // Connect Font Awesome icons.
        function font_awesome() {
          if (!is_admin()) {
             wp_register_style('font-awesome', esc_url(get_template_directory_uri()).'/font-awesome/font-awesome.min.css');
             wp_enqueue_style('font-awesome');
          }
        }
        add_action('wp_enqueue_scripts', 'font_awesome');

В данном примере указан путь к папке «font-awesome», которая находится в папке темы.

Как использовать Awesome Icons?

Перейдите на сайт http://fontawesome.io/icons/ и выберите подходящую вам иконку.
Кликните по ней, после чего, откроется ее страница.

Например, мы выбрали Awesome Icons для комментариев - http://fontawesome.ru/icon/comments/ .

Скопируйте ее код - в данном случае, это будет:

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

и вставьте в нужное место на своем сайте.

Как увеличить размер Font Awesome?

Для увеличения размеров иконок используются классы:

fa-lg (увеличение на 33%),
fa-2x (в 2 раза),
fa-3x (в 3 раза),
fa-4x (в 4 раза),
fa-5x (в 5 раз).

Применительно к нашему примеру:

<i class="fa fa-comments fa-lg"></i> fa-lg
<i class="fa fa-comments fa-2x"></i> fa-2x
<i class="fa fa-comments fa-3x"></i> fa-3x
<i class="fa fa-comments fa-4x"></i> fa-4x
<i class="fa fa-comments fa-5x"></i> fa-5x

Вот, что получилось:

Иконки font awesome: изменение размера

Больше примеров смотрите на странице http://fontawesome.ru/examples/.

Font Awesome иконки, так же как и Dashicons полностью бесплатны.

↑ 3. Плагины, помогающие добавить иконочные шрифты на сайт

И напоследок, пара полезных плагинов, которые помогут автоматизировать процесс.

Widget Icon: Содержит 640+ красивых шрифтовых иконок, предназначенных для Twitter Bootstrap.

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

Font Awesome Menus: Позволяет добавить шрифтовые иконки в ваше меню WordPress, а также в посты и на страницы.

↓ Как всегда, архив с подсказками и кодами самых интересных иконок доступен для загрузки моим подписчикам

Уже скачали 22 раз(а)

Открыть ↓

Удачного использования!

Хотите получать сообщения о скидочных акциях,
новых постах и темах для wordpress?
  1. Ксана, спасибо за великолепную статью!

  2. Выбрала вариант 3 (написано, что это самое правильное)
    Вписала указанный код в functions.php
    Скачала в папку font-awesome файл с сайта http://fontawesome.ru
    Прописала в нужном месте такой код с иконкой:
    И ничего не отражается.. Нет иконки.. Что я сделала не так?

    • Проверьте, правильно ли вы указали путь к папке font-awesome.

      А также то, в какое место functions.php вы вставили подключение иконок - лучше всего, вставить в самый низ файла, перед закрывающим ?>

  3. Здравствуйте Людмила.. а вы знаете как перевести блог на протокол https ? Просто недавно пробовали Я и служба поддержки хостинга это сделать, но не получилось..не все страницы корректно отображаются из-за смешанного контента в теме Сабрина адаптивная. Вы планируете что в ближайшее время создать новое по этой теме или вообще как?

    • Знаю :).
      Скоро напишу об этом - следите за рассылкой.

  4. Хочу поделиться некоторым опытом здесь.. может поможет чем-то - 1. При переходе на https не всегда помогают относительные ссылки в файлах, (если смешанный контент), не все может исправить спец. плагин HTTP / HTTPS, так же проблемы с отдельно вставленными в статьи (видео иил аудио) если они используются с сервисов не поддерживающих HTTPS .(но это уже в ручную отдельно нужно делать).. И ещё такой момент, Яндекс предупреждает что нужно время для склейки двух сайтов с разным регистром (а он считает блог с разными регистрами как два отдельных сайта) от 2-3 недель.. это не совсем так, в моем случае склейка и выдача статей с HTTPS произошла буквально за 6-7 дней., хотя перед этим мы уже вернули блог на старый регистр потому что не получилось наладить его кореектно.

  5. Людмила здравствуйте! С Наступающим Вас и всего лучшего в жизни! И хотел спросить, вы уже разобрались в теме перехода на https? Могли бы перевести Сабрину адаптиную на этот протокол, чтобы полностью.. то есть не было выпадающих окон в браузере указывающих на имеющиеся запретные ссылки и скрипты с http. И сколько такая услуга будет стоить? . спасибо.

    • Да, могу перевести.
      Только для этого нужно не просто в шаблоне ссылки изменить.
      Там 7 пунктов нужно выполнить, начиная от шаблона и заканчивая редиректом на сервере.

      Напишите мне через форму для контактов.

Внимание: все отзывы проходят модерацию.

Топ комментаторов
АватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватар
Самые комментируемые записи
Самые читаемые записи

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

В каждом письме публикуется код разблокировки.

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

Постов 197
Отзывов 4444