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

Красивое оформление сайта зависит от правильно выбранной стилистики. Какой инструмент нам в этом поможет? Стоит обратить свое внимание на шрифтовые иконки Font Awesome. Данный шрифт самый популярный из всех ему подобных и используется практически везде. По этому навык работы с этими иконками является базовым.

Принцип работы со шрифтовыми иконками Font Awesome:

1.Скачать файл со шрифтом на официальном сайте.
2. Скопировать папку font-awesome в папку вашего сайта
3. Идём в исходный код нашей странички и подключаем файл в качестве обычного CSS.

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

Таким образом у вас на странице подключен теперь шрифт Font Awesome.
Для использования доступно 675 иконок. Некоторые из них анимированные. Работа облегчена тем, что иконки разработаны как шрифт, и для их эксплуатации подходят все стандартные приемы для работы со шрифтами.

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

На сайте Font Awesome в разделе примеры находится множество вариантов использования шрифтовых иконок. Для примера представлена возможность изменения размера иконок без использования CSS.

<i class="fa fa-camera-retro fa-lg"></i> fa-lg<i class="fa fa-camera-retro fa-2x"></i> fa-2x<i class="fa fa-camera-retro fa-3x"></i> fa-3x<i class="fa fa-camera-retro fa-4x"></i> fa-4x<i class="fa fa-camera-retro fa-5x"></i> fa-5x

Таким способом одинаковые иконки на странице будут иметь разный размер.




Шрифтовые иконки используются повсеместно и являются одним из главных инструментов при оформлении страницы.