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

Иконочный шрифт – это просто шрифт, который вместо букв содержат символы. Их можно оформить с помощью 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="//www.facebook.com/ваша-страница">
    <span class="dashicons dashicons-facebook"></span>
    Facebook
</a>

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

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

<a href="//plus.google.com/ваша-страница">
    <span class="dashicons dashicons-googleplus"></span>
    Google +
</a>
<a href="//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 удобны тем, что они уже встроены в движок, но пока выбор их не велик.
Мне больше нравится иконочный шрифт 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="//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

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

Больше примеров смотрите на странице http://fontawesome.ru/examples/ .
Font Awesome иконки, так же как и Dashicons полностью бесплатны.

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

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

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

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

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

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

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

Открыть ↓

Только для подписчиков

Для разблокировки содержимого, введите код из последнего, присланного вам письма.

Помощь в разблокировке » Инструкция по разблокировке »

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