Использование иконического шрифта Font Awesome

Работаем с шрифтом Font Awesome

Понравилась статья? Оставьте оценку:

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(0 голосов, в среднем: 0 из 5)

Сегодня пришла мысль написать об использовании иконических шрифтов вместо обычных иконок из картинок. Начнем собственно с самого главного вопроса»А зачем это все нужно?» Профитов от использования иконических шрифтов достаточно много.

  1. Это проще. Не нужно заморачиваться с картинками, спрайтами. Подключил — забросил элемент на страницу — работает.
  2. Это легко стилизуется. Так как иконка состоит из шрифта — то поменять цвет, размер проще пареной репы.
  3. Это быстро работает. Подключил всего один шрифт — и пак иконок для сайта готов.

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

Ладно, с этим более или менее понятно. Какой пак иконок выбрать? Иконических шрифтов достаточно много, но сегодня рассмотрим один  из них Font Awesome, так как он достаточно распространен. первым делом скачаем font awesome и подключим его на наш сайт. В скачанном архиве есть папка css — оттуда возьмем файлик font-awesome.min.css и поместим в папку css нашего проекта. Всю папку fonts  закинем также в наш проект. Должна получиться вот такая структура папок

css
  font-awesome.min.css
  style.css
fonts
  fontawesome-webfont.eot
  fontawesome-webfont.svg
  fontawesome-webfont.ttf
  fontawesome-webfont.woff
  fontawesome-webfont.woff2
  FontAwesome.otf
index.html

Теперь подключим font-awesome.min.css

<html>
<head>
<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
</body>
</html>

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

Собственно все, шрифты магическим образом подключены и их можно использовать на странице. Перейдем на страницу со списком иконок http://fontawesome.ru/all-icons/ и выберем что-нибудь. Например, календарик http://fontawesome.ru/icon/calendar-o/ Видим класс, который необходимо использовать для вставки иконки  fa-calendar-o . Создаем элемент с этим классом:

<p><i class="fa fa-calendar-o"></i>вставка иконки с помощью дополнительного элемента</p>

Бинго, иконка вставлена. Осталось задать размер, цвет и так далее. Да,  кстати, есть еще юникод этой иконки. Юникод: f133  интересно зачем он нужен? Сейчас расскажу. Иногда требуется вставить иконку там, где неудобно или невозможно воткнуть элемент <p><i class="fa fa-calendar-o"></i>. Тогда можно вставить иконку путем добавления стилей в псевдоэлемент :after или :before

<head>
<style>
p:before {
    content: "\f133";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    color: #000;
    font-size: 18px;
}
</style>
</head>
<body>
<p>вставка иконки с помощью css правил</p>
</body>

Вот таким нехитрым образом можно добавить иконку перед параграфом, не добавляя лишних элементов в html код.

Оставить комментарий