Font Awesome - набор иконок для стилизации

Очень удобный и быстрый способ вывести иконку пункта меню, в заголовке и в любом месте сайта, на чистом CSS.

Часто появляются подобные задачи, да и признаться, вид у сайтов с иконками куда приятнее. И если нет четких ТЗ по иконкам, или просто лень рисовать - этот вариант подойдет идеально.

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

Одним из таких шрифтов является Font Awesome.

Ниже я расскажу как использовать Font Awesome с помощью псевдоклассов ::before и ::after

Font Awesome является бесплатным, свободным шрифтом, распространяющемся под лицензией CC BY 3.0. Иконки шрифта представлены не в растровой, а в векторной форме, что является очень положительным моментом, т.к. увеличение шрифта не влияет на качество иконки. В комплекте вся сборка WEB-font, так что можно не переживать о кроссбраузерности.

Проект очень даже живой, новые иконки постоянно добавляются, что не может не радовать. На момент написания поста в коллекции содержится 479 иконок.

Значения иконок в HTML-формате.

Рассмотрим пример с добавлением иконок для меню категорий.

Первоначальная разметка:

<ul>
  <li class="photo">Фото</li>
  <li class="post">Почта</li>
  <li class="music">Музыка</li>
  <li class="funny">Смех</li>
</ul>

ul { margin-top: 50px; }
ul li {
  background-color: #ccc;
  border-bottom: 1px solid #333;
  color: #333;
  cursor: pointer;
  list-style: outside none none;
  padding: 5px 10px;
  width: 150px;
}
ul li:hover{
  background-color: red;
  color: #fff;
}

Теперь приступаем к добавлению иконок. Для этого качаем последнюю версию шрифта на странице проекта.

Извлекаем шрифты из архива, и подключаем с помощью CSS:

@font-face {
  font-family: 'fa'; /* По этому названию мы будем обращаться к шрифту */
  src: url('fonts/fontawesome-webfont.eot');
  src: url('fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/fontawesome-webfont.woff') format('woff'),
       url('fonts/fontawesome-webfont.ttf') format('truetype'),
       url('fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Теперь настраиваем сами пункты. Для этого переходим на страницу иконок, там выбираем необходимые, и переходим на её страницу.

На странице иконки есть её значение в Unicod'е. Этот код нам и нужен

li:before {       /*<--Настраиваем подключенный шрифт-->*/
  font-family: fa;
  padding-right: 7px;
}
.photo:before{    /* Пункт "Фото" */
  content: "\f030";
}
.post:before{    /* Пункт "Почта" */
  content: "\f0e0";
}
.music:before{    /* Пункт "Музыка" */
  content: "\f001";
}
.funny:before{    /* Пункт "Смех" */
  content: "\f118";
}

Вариантов применения, особенно учитывая количество иконок, просто безгранично.

Собственно все.