Font awesome векторные иконки. Подключение

Font awesome — библиотека кастомизируемых векторных иконок. С помощью CSS вы с легкостью можете настроить цвет, размер, тень и многое другое.

Подключение

Скачайте архив с Font awesome (тут).  На сервере сайта создайте 2 папки (если их нет): css и fonts. В css добавьте файл из архива font-awesome.min.css, а в fonts содержимое папки fonts скаченного архива.

В шапке фала index.html подключите загруженный css

Использование Font awesome

Для внедрения иконки в документ необходимо сделать 2 простые вещи:

  1. Выбрать иконку с сайта, открыть страницу иконки и скопировать её код (тег <i>)
  2. Вставить код в документ

 

Иконки Font awesome с фиксированной шириной

Для задания фиксированной ширины иконки добавите класс fa-fw. Это очень удобно при создании вертикально списка

 

Иконки Font awesome для маркированного списка

Вы можете заменить стандартные иконки маркированного списка на собственные. Для этого используйте классы fa-ul и fa li.

Анимация иконок  Font awesome

Добавьте классы fa-spinfa-pulsefa-spinnerfa-refresh или fa-cog, чтобы установить вращающиеся иконки. Анимация не поддерживается в IE8 — IE9.