Удобные иконки для сайта в шрифте Font Awesome

Иконки для сайта, как часто приходится сталкиваться с этим вопросом при создании очередного проекта.
Для себя вопрос с иконками я решил при помощи, на мой взгляд удачной, их реализации в шрифте Font Awesome. Мало того, что данный шрифт включает в себя более 400 иконок, он позволяет нам пользоваться всеми преимуществами обычного шрифта и html элемента, а именно изменение цвета и размера, задать фон и внешний размер, добавить эффекты при наведении и многое другое.

Давайте же перейдем от слов к делу. Для того чтобы применить иконки Font Awesome в своем проекте, нужно сделать следующее:
1. Скачать архив с самим шрифтом и базовыми стилями к нему.
2. Поместить стили Font Awesome в вашу папку со стилями и скопировать из архива папку fonts в корень сайта, так чтобы она была на одном уровне с папкой стилей.
3. Добавить внешнюю ссылку на файл стилей Font Awesome, всего одна строка:

	<link rel="stylesheet" type="text/css" href="css/font-awesome.css">

Все мы готовы к использованию всех иконок, которые есть в комплекте.
Они наглядно представлены на сайте проекта Font Awesome.
Выбираем нужную нам иконку для сайта, копируем ее название класса и вставляем в тег <i> с классом fa + класс иконки, должно получится что-то в этом духе:

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

Много примеров использования иконок есть на сайте проекта - ссылка

В свою очередь я сделал небольшой демо-вариант, для наглядности. Поместил иконки в название сайта, блоки описания (статьи) и в футер добавил социальные иконки с фоном и простым hover эффектом.

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

Метки: featured, FontAwesome, Иконки

Рубрика: Программы и скрипты, Скачать