Шрифт Font Awesome с векторными иконками для сайта

Дорогие читатели, приветствую Вас! Рассказать о шрифте Font Awesome я планировал достаточно давно, в своих проектах активно его применяю и сегодня приведу несколько аргументов в его пользу.

Font Awesome

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

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

Иконочный шрифт

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

Преимущества и недостатки иконочных шрифтов

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

С чем связана их популярность? Решающую роль сыграли гибкость настройки, простота установки и использования в проекте. Основные преимущества:

  • В коллекции более 500 бесплатных векторных иконок для сайта.
  • Иконки масштабируются до любого размера без потери качества.
  • Стилизация с помощью CSS — размер шрифта, цвет и другие свойства.
  • Не требуется включенная поддержка JavaScript в браузере.
  • Кроссбраузерность (IE7 и выше), поддержка мобильных браузеров.

Наряду с преимуществами стоит упомянуть о недостатках, они, к сожалению, тоже есть, но довольно незначительные:

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

Как подключить шрифт Font Awesome

Первый и самый простой способ подключить шрифт — загрузить его с внешнего CDN, вставляя в секцию <head> следующую строку:

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

Второй способ заключается в ручной установке шрифта Font Awesome на свой хостинг. Загрузите архив с официального сайта, распакуйте и сохраните папки css и fonts на сервере в каталог font-awesome. Подключается аналогично, меняя лишь путь к файлу:

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

Как использовать иконки Font Awesome на сайте

Для того чтобы вставить иконку на страницу поступаем следующим образом: находим на сайте нужную иконку и копируем ее код, затем вставляем в HTML-режиме:

1
<i class="fa fa-twitter"></i>

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

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

Я покажу как это сделать на примере виджета категорий WordPress. Посмотрите на фрагмент исходного кода:

1
2
3
4
5
6
<div class="widget_title">Рубрики блога</div>
<ul>
	<li class="cat-item cat-item-5">
		<a href="/category/wordpress/">Wordpress</a>
	</li>
</ul>

Для класса cat-item я добавил псевдоэлемент before таким образом получилось:

1
2
3
4
5
6
.cat-item:before {
	content: "\f07c";
	font-family: FontAwesome;
	color:#393;
	padding-right:10px
}

Свойство content генерирует иконку из hex-кода таблицы символов Unicode, который можно узнать на странице с иконкой:

Font Awesome Unicode

Unicode \f07c как раз и соответствует hex-коду нужной иконки, который в дальнейшем применяем для стилизации собственных классов.

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

  1. Сергей Удалов

    Честно говоря, я до сих пор не пойму — зачем они нужны, и что это такое вообще? А уж про то, как они устанавливаются, я вообще молчу, хотя пытался разобраться (честно).

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

    Ответить

  2. Webliberty

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

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

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

    Ответить

  3. Сергей Удалов

    Прочитал ваш комментарий — вроде простым языком объясняете, но всё равно я пока далёк от этого, к тому же «ковыряние в коде» потихоньку уходит в прошлое, как покупка ссылок… Хотелось бы конечно, дождаться выхода обещанных двух статей, чтобы окончательно определиться — моё это или нет… В моём шаблоне (который я использую) они тоже есть. Но это тоже самое, что деревенскому балалаечнику показать японский синтезатор))) Вроде делают общее дело…. :o

    Ответить

  4. Михаил

    Очень полезная и хорошая вещь. Осталось только отработать практические рекомендации для нас — чайников.

    Ответить

  5. Сергей

    Сергей Удалов, серьёзно, у вас возникают трудности в подключении одной css’ки? А процесс «копировать-вставить» вы называете «ковыряние в коде»?

    Ответить

  6. Webliberty

    Сергей, у всех уровень подготовки разный. Думаю на конкретных примерах будет понятнее)

    Ответить

  7. Сергей Удалов

    Сергей, насколько я понял, по тому как вы защищаете автора блога — у вас одинаковый уровень знаний? Прочтите, пожалуйста мои комментарии выше и больше не задавайте подобных вопросов. Не надо оскорблять тех, кто понимает меньше вашего, хорошо?

    Ответить

  8. allemiko

    Денис, очень хорошая вещь, а как можно увеличить размер иконок? Что-то они маленькие совсем :smile:

    Ответить

  9. Webliberty

    Размер иконок задается в CSS с помощью свойства font-size, это такой же шрифт как Arial, Tahoma и другие:

    1
    2
    3
    
    .style {
    	font-size: 20px;
    }

    Ответить

  10. allemiko

    Webliberty, Спасибо, но я уже настроил, у меня это был тег li, я увеличил размер текста, иконки увеличились сами. Надо как бы распределить все это дело, сделать отдельный контейнер под иконки, и удобно и стильно :twisted:

    Ответить

  11. Webliberty

    Алем, а чего не хвастаешься новым сайтом? Решил вернуться в наши ряды? ;-)

    Ответить

  12. allemiko

    Webliberty, Да вернусь это точно, сайт на локальном хосте еще. :smile:

    Ответить

  13. Валентин

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

    Ответить

  14. Марат

    Здравствуйте!

    Не могу определить какой класс отвечает за определенный пункт рубрики (использую Firebug для Firefox). Вроде понял что это class="cat-item cat-item-55" Прописываю в CSS вот такой код:

    1
    2
    3
    4
    5
    
    .cat-item cat-item-55:before {
            font-family: FontAwesome;
            content: "\f07c";
            color:#ff0000;
    }

    Не работает! Что не так делаю?

    Ответить

  15. Webliberty

    Марат, здравствуйте! Попробуйте применить свойства к классу li.cat-item:before без cat-item-55 (это один из элементов списка категорий).

    Ответить

  16. Алексей

    Спасибо Денис за хорошую и интересную статью!) И спасибо, что помог разобраться с этим иконочным шрифтом) А то для таких новичков как я это просто дремучий лес))) Хотя сейчас понимаю, что по сути ничего сложного в этом нет. Еще раз спасибо за помощь. Сам бы я долго думал как их применить у себя на сайте)

    Ответить

Ваш комментарий:

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: