Доброго времени суток 🙂
Данная статья будет посвящена иконкам. Но не простым иконкам, которые привычны в нашем понимании, те которые в виде изображений и просто подключены к блоку стилями, а иконки шрифта. То есть по сути, это просто символ шрифта, а не изображение.
Использование таких иконок все чаще и чаще встречается на просторах интернета. Это довольно удобно и иногда, можно сэкономить кучу времени на отрисовку тех или иных иконок, которые просто можно подключить в виде шрифта. Конечно, это не разноцветная иконка, которая может именно и нужна Вам, но если же надо просто одноцветная, то иконки из шрифтов, это то что Вам нужно.
Одним из таких шрифтов является - 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;}
В третей строке юникодом выводим нужную иконку. У каждой иконки свой собственный код. Когда на сайте шрифта выберете иконку, на картинке под ней будет тот самый юникод:
Перед кодом, нужно поставить обратный Слэш \ , чтобы иконка вывелась!
Теперь, Вы сможете без проблем интегрировать себе иконки шрифта. Использование таких иконок в замен изображениям, поможет Вам сэкономить на ресурсах, затраченных на загрузку каждой страницы.
На этом все, спасибо за внимание. 🙂
