Создание сайта-визитки. Иконочный шрифт

Главная » Видеоуроки » HTML+CSS » Создание сайта-визитки. Иконочный шрифт

В этом уроке мы закончим делать главную страницу нашего сайта-визитки — добавим информацию в подвал, а именно иконки. Но прежде, в начале урока я показал, как нужно «прибить» подвал к низу страницы, добавив несколько css правил. Первое, что может прийти в голову — сделать иконки при помощи картинок. И это будет абсолютно верно. Ресурсов где можно скачать подобные иконки, достаточно много. В своей практике я часто использую https://www.iconfinder.com/. Второй способ — иконочный шрифт. Сейчас иконочные шрифты набирают огромную популярность. В чем главный плюс иконочных шрифтов? Он заключается в скорости загрузки страниц. Понятно, что картинки для каждой иконки или даже спрайт могут быть достаточно большого размера. Учитывая, что на сайт грузятся другие картинки, скрипты и другие ресурсы, то иконки могут стать и без того лишним грузом.

В этом уроке (и очень часто в своей практике) я использую иконочный шрифт https://fortawesome.github.io/Font-Awesome/. Этот шрифт очень часто обновляется (по мере выхода новых иконок). Так как это шрифт, то мы с иконками можем работать как с обычным шрифтом. С картиками, как вы понимаете, мы так работать не можем — например, мы не можем задать цвет, так это статический элемент (картинка).
Список иконок доступен по ссылке https://fortawesome.github.io/Font-Awesome/icons/
Также доступны некоторые дополнительные инструменты, а именно готовые классы для размера иконок, анимация, и т.д — https://fortawesome.github.io/Font-Awesome/examples/

Иконочный шрифт — это обычный css файл, который читает файлы шрифтов из папки fonts. Все это поставляется в дистрибутиве.

Второй способ добавить font awesome на свой сайт — через CDN. Для этого достаточно у тэга link в аттрибуте href указать ссылку https://www.bootstrapcdn.com/fontawesome/

Подписаться на рассылку

Будьте в курсе - получайте последние статьи на свой email

Ваша подписка успешно оформлена

Pin It on Pinterest

Share This