Оформление сайта, его разделов, заголовков или параграфов статей мне казалось интересным и актуальным, но все не было времени заняться этим вопросом вплотную. И вот сегодня я хочу вам показать, как просто, можно привнести в дизайн своего сайта разнообразие.

Зачем вам нужны шрифты с иконками

Основная фишка в том, что тематические иконки, которые вы получите в результате подключения шрифта к сайту, могут быть стилизованы как и обычные шрифты. Им можно задать любой цвет, придать тень и задать любой размер не заморачиваясь на оптимизацию и уменьшение веса изображений. Это ведь шрифт! Вы могли их встречать на модных сегодня плоских дизайнах шаблонов для сайтов. Их применение безусловно расширит ваши возможности и сделает работу по разработке нового дизайна более насыщенной и интересной. Кроме того, позволит снизить вес страницы, что является важным при росте увеличения трафика с мобильных устройств на ваши сайты.

Как начать использовать шрифты с иконками

Раньше я применял стили для списка, как на рисунке, ниже. Еще использовал иконки в формате png, jpg или gif, что было прикольно но не совсем удобно, да и отрицательно влияло на скорость открытия страницы сайта. С появлением svg, стало возможным подключение готовых, больших наборов тематических иконок в виде шрифта (честно признаюсь я только примерно знаю что это, поэтому некоторые названия могут покоробить слух профессионалов).

Все что вам понадобиться, так это подключить 2 файла стилей в блоке head и залить по ftp нужный вам набор шрифтов на хостинг (в Файловый менеджер - для Ucoz).

Посетите страницу Download the Fonts и в нижней части найдите серый блок с кнопкой загрузить все сеты "Download All Sets"

С содержанием сетов вы сможете ознакомиться на той же странице. Всего их четыре:

• General set
• General (enclosed) set
• Social set
• Accessibility set

Я не пробовал добавить на сайт все шрифты сразу, мне хватило одного "General set".

Добавляются иконки просто.

Например для заголовка или списка, достаточно добавить после открывающего тега H1 или li код нужной иконки, который имеет формат

<i class="foundicon-[icon]"></i> 

В итоге может получиться что-то наподобие:



согласитесь, удобно.

Как встраивать шрифт иконок для Ucoz

Почему заостряю внимание на Ucoz? Потому что на прочих сайтах, на платных хостингах, проблем с подключением, скорее всего не возникнет. Залил на хостинг, подключил стили и все - вставляй коды с иконками куда нужно.

В случае Ucoz, мы не сможем загрузить папку .sass-cache, поэтому загружать будем без нее и без sass. То есть заливаем только папку шрифтов и стилей.

И последняя процедура - нужно слегка отредактировать файл стилей (можно оба если ждете гостей с IE) general_foundicons. А именно:
нужно заменить ../ на / (подтереть точки во всех url).

До

После

Если случится так, что вам интересно применить иконки на своем сайте, но по какой-то причине нет желания возиться самому (самой) или не получается "прикрутить", вы можете обратиться ко мне, в разделе услуги.