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

Приветствую всех на моем блоге.

Сегодня хочу рассказать о шрифте Font Awesome.

Это шрифт с векторными иконками, которые можно использовать на сайте.

Официальный сайт — http://fontawesome.io

Иконочный шрифт Font Awesome содержит огромный набор векторных иконок.

Они прекрасно масштабируются и отлично выглядят на экранах высокого разрешения.

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

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

Преимущества:

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

Недостатки:

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

Подключение шрифта Font Awesome

Первый способ подключить шрифт — загрузить его с внешнего CDN.

Вставляем между тегами <head></head> следующую строку:

Второй способ - ручная установка шрифта Font Awesome на свой хостинг.

Необходимо загрузить архив с официального сайта, распаковать и сохранить папки css и fonts на сервере в каталог font-awesome.

Подключается шрифт аналогично.

Только нужно поменять путь к файлу:

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

Для того чтобы вставить иконку на страницу необходимо:

  • Находим на сайте нужную иконку и копируем ее код.
  • Вставляем в HTML-режиме.

Должно получиться примерно так:

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

Иногда элементы сайта динамически формируются, например, PHP функцией.

При этом нет прямой возможности редактировать HTML.

Тогда применяются псевдоклассы в селекторах CSS.

На примере моего виджета рубрик рассмотрим, как можно это сделать.

Посмотрим на фрагмент исходного кода:

Для класса cat-item был добавлен псевдоэлемент before.

Таким образом получилось, что иконка стоит перед текстом:

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

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

 

Надеюсь, кому-то будет полезна данная статья.

Оставляйте комментарии, буду рад помочь с установкой.

С уважением, Сергей Кривцов


Понравилась статья? Поделитесь с друзьями!

Читайте также на моем блоге:

Подписка на обновления блога:


  • http://www.macmakeupcheap.com/wholesale-urban-decay-brand-of-lipstick-moisturizing-makeup-p-1609.html wholesale urban decay brand of lipstick moisturizing makeup wholesale

    wholesale urban decay brand of lipstick moisturizing makeup wholesale

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

  • http://www.macmakeupcheap.com/lime-crime-venus-2-palette-eyeshadow-matte-eyes-makeup-8-color-p-1507.html lime crime venus 2 palette eyeshadow matte eyes makeup 8 color wholesale

    lime crime venus 2 palette eyeshadow matte eyes makeup 8 color wholesale

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

  • http://www.macmakeupcheap.com/mac-eye-pencil-c-41.html mac eye pencil wholesale

    mac eye pencil wholesale

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

  • http://topne.ws/bytenews87205 bytecoin price kroger

    bytecoin price kroger

    best cryptocurrency to buy now bytecoin bitcointalk instructions