Дизайн та розробка сайту

Иконки из шрифта Font Awesome

Font Awesome

Доброго времени суток 🙂

Данная статья будет посвящена иконкам. Но не простым иконкам, которые привычны в нашем понимании, те которые в виде изображений и просто подключены к блоку стилями, а иконки шрифта. То есть по сути, это просто символ шрифта, а не изображение.

Font Awesome

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

Одним из таких шрифтов является - Font Awesome. С данным шрифтом можно познакомится на официальном сайте - Font Awesome. Пример использования данного шрифта - это стандартный шаблон на движке OpenCart. Там почти все иконки из шрифта. Вот как пример:

Теперь перейдем к самому интересному, как добавить иконки шрифта себе на сайт. В первую очередь нужно подключить шрифт себе на сайт или страницу, как и любой другой не стандартный шрифт. Самй популярный метод, это добавить в шапку сайта вот такую строку:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

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

В разделе Icons на сайте Вы увидите полный список всех доступных иконок, которых там не мало. Каждая иконка имеет свой класс. Например - fa fa-reddit-alien.

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

<i class="fa fa-envelope"></i> 

Все стили будут заданы автоматически. Для увеличения иконки добавляется еще один класс. Разработчики сделали еще 4 класса, при добавлении которых иконка увеличится. Это классы - fa-2x, fa-3x, fa-4x,fa-5x. Тоесть увеличение в 2, 3, 4, 5 раза. Теперь код иконки будет таким:

<i class="fa fa-envelope fa-2x"></i> 

Также существует и второй вариант вывода иконок. Данный способ осуществляется с помощью псевдоэлементов :after или :before.

Нужному блоку добавляем стили и иконку шрифта выводим с помощью Юникода (Unicode). Например у нас есть блок ruch, чтобы рядом с ним вывести иконку, пропишем следующие стили:

.ruch:after{
	padding-right: 7px;
	content: "\f005";
	font-style: normal;
	font-weight: normal;
	text-decoration: inherit;
	font-family: FontAwesome;
	font-size:40px;}

В третей строке юникодом выводим нужную иконку. У каждой иконки свой собственный код. Когда на сайте шрифта выберете иконку, на картинке под ней будет тот самый юникод:

Перед кодом, нужно поставить обратный Слэш \ , чтобы иконка вывелась!





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

На этом все, спасибо за внимание. 🙂

Дизайн та розробка сайту

Back to top