Тема шрифтов иконок уже рассматривалась на сайте alltemplate.ucoz.com в разделе Вэб дизайн. Вы можете прочитать про шрифты иконки для сайта и способе их применения в дизайне вашего сайта в этой статье.
Сегодня мы рассмотрим другие шрифты иконки, их бесплатные библиотеки и кратко остановимся на способах подключения шрифтов к сайту и внедрения в дизайн. Преимущества использования шрифтов вместо графики в современном сайтостроении и вэб дизайне бесспорно и очевидно, поэтому сразу перейдем к знакомству с основными шрифтами, которые вам безусловно пригодятся в вашей работе.
Шрифты иконки Handy icons от WeGraphics
Первый шрифт в нашем обзоре, это Handy icons. Этот шрифт включает в себя 99 нарисованных (мультяшных) иконок, которые были преобразованы в вэб шрифт. Таким образом вы можете использовать буквы (латинские) вместо графической иконки в формате PNG, GIF или JPG, а так же все символы набираемые на клавиатуре (пробел в том числе). Этот шрифт дарит нам сервис WeGraphics. Скачать его может каждый зарегистрированный (бесплатно) по этой ссылке.
Установка шрифта происходит путем загрузки файлов на хостинг сайта и подключением файла CSS. После чего можно с помощью span задавать иконку в нужном месте дизайна вашего сайта, или контента.
Онлайн генератор шрифтов иконок Fontello
Довольно любопытным вариантом может стать генератор шрифтов иконок Fontello. В генераторе можно как в конструкторе, набрать коллекцию конкретных иконок получив в итоге файлы для подключения меньшие по весу. Это более выгодно, как если бы вы загрузили огромную коллекцию шрифтов иконок, из которой вам понадобится максимум 50 видов. В итоге это позволит уменьшить нагрузку и не увеличить время скорости загрузки страницы сайта. Кроме того, это удобно в случае, когда вам нужен небольшой набор иконок (10-30 шт). Например, подборка тематических иконок или только иконки для обозначения разделов интерфейса и т.д.
Добавление нужной иконки происходит встраиванием кода
<i class="icon-music"></i>, где icon-music это имя нужной вам иконки. Таким образом, меняя имена, вы сможете разместить нужную иконку в любом месте и задать ей стилевое оформление, как обычному шрифту (цвет, размер и пр.). Кроме всего в генераторе шрифтов иконок Fontello есть API. Настройка анимации иконок происходит посредством ознакомления с файлом animation.css.
Шрифты иконки Font Awesome и CSS фреймворк
Очень большая библиотека шрифтов иконок Font Awesome. На сайте вы сможете ознакомиться с примерами использования, видами иконок, которые разбиты на тематические разделы. Там же можно и скачать файлы установки. Иконки добавляются так же как и в Fontello с помощью тегов <i>.
336 шрифтов иконок Typicons
Библиотека шрифтов Typicons обещает минимальную нагрузку при использовании своих шрифтов. Инструкция по установке немного сложнее чем в предыдущих случаях, так как предполагает загрузку и подключения дополнительных файлов с хостинга IT-проектов и совместных разработок GitHub. Собственно в инструкции об этом сказано. Далее необходимо подключить файл стилей typicons.min.css, а в контент или дизайн иконки встраиваются классами по похожей схеме:
<span class="typcn typcn-arrow-left"><span>
300+ шрифтов иконок Elegant
Добавление иконок Elegant происходит путем установки блока div с атрибутами юникода собственный для каждой иконки. Код выглядит так:
В архиве с установочными файлами находится таблица со значениями юникода для каждой иконки. Не знаю насколько это удобно, но этот вариант все же отличается от предыдущих и требовал, на мой взгляд, отдельного рассмотрения.
1000+ шрифтов иконок
Шрифтов иконок очень много, большинство из коллекций содержат похожий символьный ряд, но отличаются стилем исполнения. Большой выбор позволяет определить оптимальный шрифт для себя лично и дизайна сайта, быстро подключить и начать использовать.
Ниже представлены еще несколько сайтов, где вы сможете посмотреть и скачать шрифты иконки. Что касается Foundation, то ссылка приведет вас на наш сайт в предыдущую статью, где подробно разъяснена установка этого шрифта.
Возникнут вопросы - пишите в Контакты.
