Шрифтовые иконки для сайта — это шрифт, который содержит в себе набор иконок различных тематик. Практически каждый современный сайт (шаблон сайта) использует шрифтовые иконки (иконочные шрифты) и на то есть своя причина. Найти иконки которые идеально подойдут для Вашего сайта очень трудно, ведь нужно учесть их размер, цвет, стиль, тематику и т.п. Представьте ситуацию, когда вам не надо этим заниматься, Вы можете самостоятельно прописать иконке цвет, размер и она всегда будет подходить вам по стилю! Кажется невероятно, но для этого и нужны шрифтовые иконки.
Основные преимущества шрифтовых иконок:
— Шрифтовые иконки можно масштабировать без потери качества;
— Шрифтовые иконки значительно быстрей загружаются на странице, по сравнению с изображениями;
— Шрифтовым иконкам вы можете задать любой цвет, они всегда будут вписываться в ваш сайт;
— Шрифтовые иконки очень легко интегрировать в проект с сохранением целостности каркаса сайта (без смещение других элементов из за иконки).
Подключение иконок - шрифтов происходит в несколько этапов:
1) Скачиваем архив со шрифтовыми иконками и разархивируем.
2) Далее нужно загрузить файлы на сервер:
- Находим Css файл с названием шрифта (например: simple-line-icons.css) и загружаем на сервер (как вариант через FTP). На сервере, скорее всего вы найдете папку CSS в корне сайта (если нет, то создайте ее) положите шрифт в нее.
3) Теперь нужно подключить стиль (шрифтовые иконки) к сайту.
- • Чтоб подключить иконочный шрифт нужно вставить код подключения css файла между тегами <head> </head>
- • <link rel="stylesheet" href="/css/simple-line-icons.css">
- Обратите внимание! Строка ---> href="/css/simple-line-icons.css" ---> указывает на путь к шрифту относительно корня сайта (если вы сохранили файл в другом месте, то измените путь).
4) После того как мы подключили шрифт с иконками, мы можем вставлять иконки в любом месте сайта. Давайте попробуем:
- В месте, где вы хотите вставить иконку, нужно вставить следующий код:
- <span class="имя иконки"></span> ---> например: <span class="icon-user"></span>
P.s. Не забывайте, что иконка - это шрифт и ей можно управлять, так же как и шрифтом (font-size, font-weight, line-height и т.д.).
