Подключение иконочного шрифта к странице сайта. Генерируем шрифт с Fontello.

Рекомендую хостинг которым я пользуюсь

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

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

Пример иконок шрифта

 

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

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

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

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

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

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

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

Переходим на сайт Fontello

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

Выбираем интересующие нас иконки

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

Изменяем размер иконок для просмотра

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

Имена вызова иконок

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

Скачиваем архив шрифтов иконок

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

Содержимое скачанного архива шрифтов-иконок

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

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

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

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

Девушка очень радуется тому что смогла подключить шрифты иконок к странице ))

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

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

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

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

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

ссылка без иконки

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

иконка внешней ссылки

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

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

ссылка с иконкой

 

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

html-код

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

spisok

 

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

html-код:

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

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

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

девушка радуетсyа своему успеху

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

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

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

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

автор: Руслан Овчинников
Оценка: 1Оценка: 2Оценка: 3Оценка: 4Оценка: 5 (3 оценок, в среднем: 3,67 из 5)
Загрузка...