Как подключить иконочный шрифт

MagentaWAVE

Примеры и готовые решения для оформления блога и сайта. Разработка и дизайн шаблонов Blogger.

Подключение и использование иконочных шрифтов

Дорожный знак 100 на дороге уходящей в даль

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

Два наиболее популярных ресурса это Font Awesome и Fontello, первое(и главное) — они бесплатны; второе — Font Awesome — предоставляет публичную ссылку для прямой загрузки шрифта со своего хостинга, то есть не нужно использовать свой или искать сторонний хостинг для размещения необходимых файлов, в Fontello можно собрать свой собственный шрифт, загружая на сайт иконки в .svg формате, или выбрать из общего набора именно те, которые нужны в данном случаи, а не загружать всё что есть.

Как подключить иконочный шрифт к сайту

Способов подключения на данный момент существует три:

1. Если доступна, использовать общую(публичную) прямую ссылку на хостинг сервиса, которую нужно разместить внутри раздела <head>, лучше повыше или перед закрывающим </head>, это уже как пойдет.
Для Font Awesome последняя версия ссылки выглядит так:

2. Скачать архив со всеми необходимыми файлами, извлечь содержимое папок CSS и Fonts, разместить извлеченные файлы на хостинге своего сайта в соответствующие папки и указать на них ссылки в секции <head>. </head> вашего сайта следующим образом —

— дать путь только к папке:

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

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

Если воспользоваться вторым вариантом — подключить шрифт используя CSS-файлы, возможно добавление знаков как с помощью класса, так и кода:

1. Создать пустой элемент с классом иконки и добавить его перед нужным блоком:

Добавление иконочных шрифтов на сайт Joomla

Несколько лет назад я писал статью Добавление иконок пунктам меню Joomla. Простой и хороший способы. Тогда мы рассматривали возможности вставки иконок на сайт под управлением Joomla c помощью простых изображений и спрайтов. Каждый из способов имел свои достоинства и недостатки. Тогда я назвал эти способы «Простой» и «Хороший». В этой статье я расскажу про «Отличный» способ добавления иконок на сайт, который позволит существенно сократить время загрузки страниц с иконками, а также даст вам над ними тотальный контроль.

Что такое «иконка»?

Давайте вспомним, что вообще такое «иконка». Это маленькое изображение, которое украшает сайт и делает некоторые часто употребляемые элементы, например, кнопки или ссылки меню, нагляднее. Примеры иконок вы можете видеть на сайте wedal.ru в горизонтальном и вертикальном меню:

Проблемы использования иконок

Какие проблемы были при использовании иконок?

Сложно масштабировать, либо имеет большой размер
Для смены цвета иконки (например, при наведении курсора) нужно создавать дополнительную иконку другого цвета
При большом количестве иконок на странице, сильно замедляется ее загрузка

CSS-спрайты (если вы не знакомы со спрайтами, прочитайте в первую очередь эту статью):

Масштабирование отдельных иконок спрайта невозможно или крайне затруднительно
Для смены цвета иконки (например, при наведении курсора) нужно создавать дополнительную иконку другого цвета в спрайте
Большой размер основного изображения спрайта
Спрайт загружается целиком, даже если на странице требуется всего одна иконка
Сложное управление спрайтами при добавлении/изменении иконок

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

Несколько лет назад технология CSS-спрайтов была актуальной, но сегодня существует гораздо более удобный способ создания иконок, который мы рассмотрим далее.

Иконочные шрифты (Icon Fonts).

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

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

Все иконки, как и для спрайтов, храниться в едином файле шрифта
Мы можем изменять размер любой из иконок с помощью CSS-стиля font-size
Мы можем изменять цвет любой из иконок с помощью CSS-стиля color
Мы можем использовать для иконок всю динамику, которую дает нам CSS: hover, focus, transition и др. Можно менять цвет и размер при наведении, фокусе на форме и др.
Используя продвинутые CSS-стили, мы можем даже вращать иконки

Имеются у данного подхода и недостатки, но они несущественны:

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

Если данные ограничения вас не пугают, предлагаю окунуться в мир иконочных шрифтов.

Иконочные шрифты. Где взять? Готовые наборы шрифтов

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

– 137+ иконок – 121+ иконка – 628+ иконок – 172+ иконки – 116+ иконок – 73+ иконки – 316+ иконок – 88+ иконок – 100+ иконок – 60+ иконок – 52+ иконки – 86+ иконок – 18+ иконок – 38+ иконок – 78+ иконок – 74+ иконки – 65+ иконок

Одним словом, есть, где разгуляться =).

Из всех перечисленных выше сервисов хочу выделить Font Awesome. Сервис имеет хороший и очень внушительный набор иконок, среди которых можно найти подходящие практически на все случаи жизни.

Также хочу заметить, что если вы используете у себя на сайте CSS-фреймвок Bootstrap, по которому на сайте есть серия уроков Создание адаптивного шаблона Joomla с использованием Bootstrap, то в нем уже есть готовый набор иконок. Посмотреть их можно здесь. А если ко всему прочему вы используете еще и шаблон MasterBootstrap, то в его настройках сможете подключить на сайт Font Awesome, активировав всего одну опцию.

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

Иконочные шрифты. Где взять? Генераторы шрифтов

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

Генераторы позволяют делать три вещи:

Выбирать готовые иконки из иконочного шрифта и создавать на его основе урезанный иконочный шрифт, содержащий только необходимые иконки. Размер такого шрифта значительно меньше размера базового.
Выбирать готовые иконки из разных иконочных шрифтов и совмещать их в один.
Загружать ваши собственные SVG-файлы изображений и делать из них иконочный шрифт.

Вот несколько бесплатных генераторов иконочных шрифтов:

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

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

Иконочные шрифты. Как подключить в Joomla?

Чтобы подключить к вашему сайту на Joomla иконочный шрифт, нужно:

Скопировать содержимое папки fonts из скачанного архива шрифта в папку fonts используемого вами шаблона Joomla: templates/ИМЯ_ВАШЕГО_ШАБЛОНА/fonts/. Если такой папки не существует, следует создать ее самостоятельно.
Скопировать css-файл шрифта папки css из скачанного архива шрифта в папку css вашего шаблона Joomla: templates/ИМЯ_ВАШЕГО_ШАБЛОНА/css/.
Подключить скопированный css-файл в шаблоне Joomla. Для этого в файле templates/ИМЯ_ВАШЕГО_ШАБЛОНА/index.php добавить следующий код:

Этот код подключит заданный css-файл к шаблону.

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

На этом всё. Проверить подключен ли CSS-файл шрифта к шаблону можно так:

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

Также советую проверить правильность указания пути в CSS-файле шрифта. Обычно путь указан как:

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

Иконочные шрифты. Как использовать в Joomla?

Использовать иконку, которая вводится на странице как буква, несомненно, круто. Но еще круче, когда никакую букву вводить не нужно в принципе. Современные иконочные шрифты используют CSS-псевдокласс :before и CSS-стиль content. Не вдаваясь в технические детали, их суть сводится к тому, чтобы показать в html-теге с заданным классом какое-то содержимое, которое указано только в CSS-файле, но не указано в html. К примеру, если у нас есть пустой div на странице, у которого есть какой-то CSS-класс, то мы можем только лишь средствами CSS поместить в него символ. Вы можете посмотреть, как это работает, выделив с помощью Firebug или другого веб-инспектора, любую иконку на wedal.ru.

Таким образом, используя технику, описанную выше, можно показывать иконку лишь добавлением к необходимому html-тегу соответствующего CSS-класса. Каждая коллекция иконок содержит описание этих классов. Посмотрим на Font Awesome. На странице icons представлен список всех иконок с подписями, каждая из которых является уникальным CSS-классом, который данную иконку вызывает:

Если кликнуть по любой из иконок, откроется отдельная страница, на которой указан полный html-код вставки иконки, например:

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

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

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

Начало работы

CDN Font Awesome самый наипростейший способ начать использовать Font Awesome на вашем сайте или в приложении, и всего-лишь одной строкой кода. Не нужно ничего скачивать и устанавливать.

Иконки для сайта. Быстро.

Вам не придется тратить время на файлы на вашем сервере. Вы получите все 675 иконки плюс наборы стилей — все оптимизировано для быстрой загрузки.

Легкие обновления

Так как каждый сайт будет иметь уникальный набор иконок, то вы с легкостью можете его обновлять без каких-либо изменений в коде. Чудненько =).

Автоподдержка доступности

CDN Font Awesome поможет вам автоматизировать поддержку доступности ваших иконок для всех посетителей. Узнайте подробнее о лучших практиках доступности.

Асинхронная загрузка

Хотите ускорить загрузку вашего сайта? И мы тоже. Ваши иконки будут загружаться в фоновом режиме, что даст невероятную скорость вашему сайту.

Расширенная кастомизация Легко

Хотите управлять и размещать файлы Font Awesome сами? Вы можете скачать, кастомизировать и использовать иконки с вашими настройками. В наборе файлов Font Awesome есть как и простой CSS-файл, так и файлы препроцессоров: Sass и Less.

Использование CSS

Скопируйте полностью папку font-awesome в папку вашего проекта.
Вставьте нижеследующий код в тег <head> в HTML-код вашего вебсайта.

Использование Sass или Less

Используйте этот метод для кастомизации Font Awesome 4.7.0 при помощи LESS или SASS.

Скопируйте полностью папку font-awesome в папку вашего проекта.
В вашем проекте откройте файлы font-awesome/less/variables.less или font-awesome/scss/_variables.scss и отредактируйте @fa-font-path или $fa-font-path соответственно, для того, чтобы указать путь к папке со шрифтами.

Путь к папке со шрифтами должен указывать относительно скомпилированной папки css.

Продвинутый уровень Профи

Less Ruby Gem

Используйте официальный Font Awesome LESS Ruby Gem для легкого внедрения Font Awesome LESS в Rails-проект. Занимается поддержкой:@supercodepoet.

Если вы используете Rails, то вставьте нижеуказанный код, например, в файл application.less :

Sass Ruby Gem

Используйте официальный Ruby Gem Font Awesome SASS для легкого подключения Font Awesome SASS в ваш Rails- или Compass-проект. Занимается поддержкой: @supercodepoet.

Если вы используете Rails, то вставьте нижеуказанный код, например, в файл application.scss :

Дополнительная информация

Валидаторы

Для того, чтобы обеспечить наилучший результат в старых и глючных браузерах, Font Awesome в некоторых случаях использует хаки CSS для того, чтобы обойти глюки и ошибки в браузерах. Естественно, эти хаки вызывают предупреждения при проверке кода в валидаторах. Также, Font Awesome в нескольких ситуациях использует новые свойства CSS , которые еще не полностью стандартизированы, но используются они исключительно для прогрессивного улучшения.

На практике эти предупреждения валидатора не имеют значения, так как большая часть CSS работает без хаков и, соответственно, они не принимают участие в работе тех участков, где они не используются. Собственно, поэтому мы и игнорируем эти предупреждения.

Internet Explorer 8 и @font-face

IE8 имеет несколько проблем с @font-face при совместном использовании с псевдоэлементом :before . Font Awesome как раз использует такую комбинацию. Если страница закеширована или загружена без наведенного курсора мыши на окно браузера (например, при нажатии на кнопку «обновить» или при загрузке контента через фрейм), то страница будет сгенерирована до подгрузки шрифта. Наведение курсора мыши на страницу (body) должно отобразить некоторые иконки, наведение курсора на остальные не подгруженные иконки также их реанимирует. Подробности данной проблемы.

Необходима поддержка IE7 ?

Если вам нужна поддержка IE7 , то примите мои соболезнования. Ну правда. Font Awesome 4.7.0 не поддерживает IE7и версии ниже. Вам необходимо прочитать инструкции по FA 3.2.1 для использования в IE7. Затем можете пойти и пожаловаться тому, кто потребовал поддержку IE7 .

Решение ошибок

Если у вас возникли проблемы в работе с Font Awesome, то можете поискать решение на wiki -странице по частым ошибкам. Занимается поддержкой: @gtagliala.