Место для вас

Использование иконок 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 файл, где вы хотите использовать иконки.


Место для вас

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

кликните на картинку,
чтоб обновить код

Что за сайт

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

Будь в курсе

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

Вверх