Категория:
Опубликовано:

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

Font Awesome

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

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

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

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

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

font-awesome_0.jpg

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

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

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

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

a-b.png

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

HTML
<ul>
  <li class="photo">Фото</li>
  <li class="post">Почта</li>
  <li class="music">Музыка</li>
  <li class="funny">Смех</li>
</ul>
CSS (для наглядности)
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;
}

Пример 1
Получится должно както так:

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

Извлекаем шрифты из архива, и подключаем с помощью 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;
}

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

vybor_ikonki.png

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

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

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

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

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

Комментарии

Искал недавно в интернете как можно реализовать подобный функционал. Жаль не нашел тогда этот пост - пригодился бы. А сейчас лень переделывать )))
Но все равно - спасибо. Буду знать где искать для следующего проекта.

Всем привет)
Font Awesome - набор иконок для стилизации | Blogpost

Добавить комментарий