Место для вас

Использование иконок font-awesome в css коде

Использование font-awesome в css коде.

Font Awesome - это огромный набор бесплатных векторных иконок, которые с легкостью можно модифицировать, применяя магию css. Но я просто называю - "иконочный шрифт".

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

Но я люблю именно font-awesome. Эта любовь пошла еще со знакомства с bootstrap'ом. Тогдашний набор иконок в bootstrap'е был маленький и мой выбор пал на font-awesome. Правда используя bootstrap всегда приходится перепиливать, то темы, то расширения под иконки от font-awesome.

Стандартно для появления иконки на сайте мы прописываем так:
<i class="fa fa-user"></i>

И все. Иконка на сайте. Но бывают ситуации, когда иконки нужно прописать именно в css стилях.

Решение есть и оно очень простое.

1. перейти на сайт fontawesome.io и правой кнопкой мыши кликнуть на иконку.

Использование иконок font-awesome в css коде

2. выбрать "иследовать элемент" (это в FireFox) или "просмотреть код элемента" (это в Opera) или "инспектировать элемент" (это в Chrome)

Использование font-awesome иконок в css

Вот и все. Все что нам нужно, так это содержимое свойства content

После того, как мы узнали значение иконки, то просто вставляем его в наш css код следущим образом, указав, что вы используете шрифт FontAwesome:


.some-class{
	// ваши стили
	content: "\f2b4";
	font-family: FontAwesome;
}
	

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


Место для вас

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

Что за сайт

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

Будь в курсе

Интересненько

Вверх