Генерация и подключение шрифта иконок к странице сайта. Как использовать иконки шрифта на странице сайта.

В этой статье я расскажу Вам как создать файл шрифтов-иконок аналогичный всем известному IcoMoon, как подключить его к странице Вашего сайта. Но сначала, немного информации для тех кто не совсем понимает о чем идет речь и какие преимущества дает то самое о чем идет речь ))

При создании сайтов или его доработке перед веб-мастерами нередко встает задача подбора управляющих иконок подобного рода:

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

Иконки бывают следующих направлений: бизнес, общение, социальные сети, компьютеры и мобильные, дизайн и творчество, разработки, еда, хостинг, меню, мультимедиа, спорт, игры, символы и прочее.

В чем плюсы использования:

Все нужные иконки в одном файле;
Цвет, размер, тень, и прочее параметры, применимые к обычным шрифтам, можно менять через CSS;
Иконки можно делать абсолютно любого размера без потери качества (ведь это вектор);
Совместимы с подавляющим большинством браузеров (IE, FF, Chrome, Opera и прочие);
Поддержка Bootstrap;
Отпадает необходимость использования спрайтов.

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

Создание и подключение шрифта иконок к странице сайта

ШАГ 1. Переходим по адресу http://fontello.com/

ШАГ 2. Выбираем нужные иконки, просто кликнув по ним мышкой. Можно так же выбрать сразу группу иконок выделив их при помощи зажатой левой кнопки мыши.

Если у Вас плохое зрение и Вы не можете рассмотреть иконки, вы можете с легкостью увеличить их с помощью ползунка, который находиться в верхней части сайта. Этот ползунок просто увеличивает иконки и никоим образом не влияет на скачиваемый архив.

ШАГ 3. После того как иконки выбраны, перейдя на вкладку "Customize Names" Вы можете изменить имя вызова иконок, но делать этого не рекомендую, так как значения, выставленные по умолчанию, адаптированы под Bootstrap. Так же не рекомендую менять какие-либо значения на вкладке "Customize Codes".

ШАГ 4. Скачиваем архив со шрифтами, в которых уже содержаться нужные нам иконки. Обратите так же внимание что на кнопке для скачивания значиться количество, попавших в Ваш шрифт, иконок.

ШАГ 5. Извлекаем содержимое архива и видим следующий набор файлов и папок:

Из этого всего нас интересуют только папки CSS и FONTS. Копируем эти папки к нам на сервер. Порядка ради, файлы из папки CSS копируем в папку CSS на нашем сайте, и файлы из папки FONTS копируем в папку FONTS соответственно. Если папки FONTS у вас на сервере нет то можете просто скопировать папку FONTS в папку в которой у Вас находится папка CSS.

ШАГ 6. Подключаем файлы CSS в теге <head> нашего сайта следующим образом:

<link rel="stylesheet" href="/css/animation.css" type="text/css" />
<link rel="stylesheet" href="/css/fontello.css" type="text/css" />
<link rel="stylesheet" href="/css/fontello-codes.css" type="text/css" />
<link rel="stylesheet" href="/css/fontello-embedded.css" type="text/css" />
<link rel="stylesheet" href="/css/fontello-ie7.css" type="text/css" />
<link rel="stylesheet" href="/css/fontello-ie7-codes.css" type="text/css" />

Вы так же можете объединить код всех файлов в один и подключить только его, чтобы уменьшить количество запросов к серверу при загрузке вашей страницы.

УРА! Шрифт иконок подключен!

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

Использование шрифта иконок на странице сайта

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

Допустим у нас есть ссылка вида

<a href="site.ua">Наша ссылка</a>

1	<a href="site.ua">Наша ссылка</a>

так будет выглядеть наша ссылка на странице.

Теперь давайте добавим нашей ссылке иконку. Так как это внешняя ссылка, ей логично будет дать иконку, которая будет показывать что ссылка ведет на внешний сайт. Среди иконок, которые мы добавили в наш набор иконок как раз есть такая, вот она:

следовательно нашей ссылке нужно указать класс "icon-link-ext" чтобы html код ссылки имел следующий вид:

<a class="icon-link-ext" href="site.ua">Наша ссылка</a>

1	<a class="icon-link-ext" href="site.ua">Наша ссылка</a>

теперь посмотрим что у нас получилось:

Теперь для примера давайте попробуем то же самое проделать с каким-нибудь списком. Ниже представлен html-код списка и его внешний вид до добавления иконок:

html-код

<ul>
   <li>вопросик</li>
   <li>замок</li>
   <li>глаз</li>
   <li>письмо</li>
   <li>иконка тега</li>
</ul>

<ul>

<li>вопросик</li>

<li>замок</li>

<li>письмо</li>

<li>иконка тега</li>

</ul>

внешний вид до добавления иконок

Теперь добавим элементам списка классы иконок, соответствующих по смыслу:

html-код:

<ul>
   <li class="icon-help-circled">вопросик</li>
   <li class="icon-lock">замок</li>
   <li class="icon-eye">глаз</li>
   <li class="icon-mail-alt">письмо</li>
   <li class="icon-tag">иконка тега</li>
</ul>

<ul>

<li class="icon-help-circled">вопросик</li>

<li class="icon-lock">замок</li>

<li class="icon-mail-alt">письмо</li>

<li class="icon-tag">иконка тега</li>

</ul>

внешний вид списка с иконками:

Вот теперь все. Шрифт подключен, как его использовать Вы знаете.

Внимание! Если у Вас по каким-то причинам после добавления класса к тегу иконка не появилась, проверьте следующее:

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

Свою благодарность автору статьи вы можете выразить

просто кликнув в нужном месте на странице