Font Awesome и IcoMoon работа с иконочным шрифтом


Содержание

Украшаем дизайн сайта с помощью иконок Font Awesome

Сегодня новая статья из рубрики «Дизайн».

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

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

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

В общем, штука очень крутая. Я когда делал свои первые заказы, столкнулся с этими иконками и мне они доставили очень много неудобств. Я просто не знал, как ими пользоваться, и в некоторых случаях просто заменял эти иконки на изображения. Сейчас же я не вижу в их использовании абсолютно никаких проблем. Достаточно подключить шрифт Font Awesome к сайту, а затем в нужное место добавить код вывода иконки. Очень просто, давайте рассмотрим на практике.

Как подключить иконки Font Awesome к сайту

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

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

Рассмотрим оба варианта более подробно.

Вариант 1

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

Что делать, если значки Font Awesome не отображаются?

Сентябрь 26, 2020

Значки Font Awesome не отображаются локально, если они не размещены на CDN .

Вы не используете плагины/расширения, которые подгружают более старую/модифицированную версию Font Awesome;

Ваша панель разработчика браузера указывает, что Вы загружаете правильные файлы шрифтов;

Расширения вашего браузера не блокируют веб-шрифты (noscript, adblockplus и т.д.);

Ваша операционная система не блокирует веб-шрифты (Групповая политика Microsoft).

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

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

Обратите внимание, лучше использовать конкретные классы CSS, для того чтобы не применить изменения глобально.

Если значки Font Awesome не отображаются только в Firefox/IE, добавьте следующий фрагмент кода в файл . htaccess :

Обратите внимание на нашу коллекцию высококачественных Веб-шаблонов, если Вам нужно больше шаблонов!

Вы можете также ознакомиться с детальным видео-туториалом ниже:

Font Awesome

Иконочный шрифт и CSS-инструментарий

Font Awesome предлагает вам масштабируемые векторные иконки, которые вы можете с легкостью персонализировать — размер, цвет, тени и все, что можно сделать силами CSS.


Благодарности

Спасибо @robmadole и @supercodepoet за обзор дизайна иконок, советы, помощь по Jekyll, а также спасибо всем окружающим гавнюкам.

ОГРОМНОЕ спасибо @gtagliala за проделанную фантастическую работу над репозиторием Font Awesome в GitHub.

Спасибо MaxCDN за обеспечение превосходной доступности BootstrapCDN, самый быстрый и простой способ начать работать с Font Awesome.

Иконочные шрифты для сайта — что это и как использовать?

Доброго времени суток всем, кто решил посетить мой интернет-дневник zaurmag.ru. Вот и наступил 2020 год. Если вы заметили я в свой блог пишу очень редко и говорить о каких-то достижениях в ушедшем году я не буду. Не то, чтобы я совсем ничего не добился, просто результаты оказались не теми, что я ожидал. В любом случае это тема для отдельной заметки. А в этой статье я хочу затронуть такую тему, как иконочный шрифт. Давно хотел написать про иконочный шрифт, т.к. он стал в последнее время очень популярным, но все руки никак не доходили. Хотелось бы раскрыть эту тему более подробно.

Как вы наверно поняли из названия иконочный шрифт — это иконки, которые используются в дизайне сайта. Иконочный шрифт внедряется в шаблон сайта посредством подключения шрифтов, т.е. иконки — это обычный шрифт, только вместо букв и цифр специальные символы, которые потом преобразуются в иконки. Подключается он в шаблоне также, как и нестандартный шрифт. Про подключение нестандартных шрифтов я уже писал. Можете заглянуть и почитать, если не знаете, как это делается. Также данный шрифт вы можете установить в свою операционную систему. Устанавливается все также, как и обычный шрифт. Данный шрифт можно использовать в фотошоп для создания иконок путем вставки специальных символов. Как все это делается читайте ниже.

Навигационное меню

Давайте для начала определимся с плюсами и минусами иконочного шрифта. Вы наверно сейчас скажете: «А что есть и минусы?». Да, конечно, у иконочных шрифтов есть свои минусы, правда они мне как верстальщику не мешают.

Плюсы:

  • иконки из шрифтов имеют векторный формат, т.е. мы можем изменять их размер практически до бесконечности, не теряя в при этом в качестве. Замечу с растровыми изображениями такой трюк не пройдет;
  • один http-запрос на сервер (хотя если с картинками использовать спрайты будет тоже самое, но дело в том, что собирать иконки в спрайты немного трудоемко)
  • быстрая загрузка за счет малого веса (файл стилей можно минимизировать);
  • легко стилизовать посредством css-правил (изменять размер, цвет, трансформировать, анимировать и др.);
  • кроссбраузерность (включая поддержку старыми браузерами).

Минусы:

  • в первую очередь следует понимать, что иконочный шрифт это обычный шрифт, а шрифты при подключении могут создавать дополнительную нагрузку в виде отправки дополнительных запросов на сервер. Причем, эта нагрузка будет увеличиваться по мере роста набора ваших икнок, т.е. размер файла шрифта будет увеличиваться;
  • ограничение полету фантазии дизайнеру (по сути дизайнер ограничен именно тем набором иконок, что присутствуют в сервисах. Можно, конечно, и свою икноку загрузить, но это немного сложный процесс);
  • иконки могут быть только в одном цвете (например, в SVG одну иконку можно залить и сделать разноцветной, как радугу), если конечно не примените различные css-трюки;

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

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

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

Font Awesome

Как я заметил на зарубежных сайтах большую популярность получил Font Aswesome. Font Awesome — это библиотека иконок, которая изначально была придумана для фреймворка Twitter Bootstrap. Но в дальнейшем разработчики решили, что ее можно использовать отдельно. Из основных плюсов данной библиотеки я бы отметил развитие проекта и частое обновление базы иконок. С каждым выходом новой версии в набор добавляются все новые иконки, что в свою очередь не может не радовать.

Подключение Font Awesome

Для начала нам необходимо скачать набор иконок с официального сайта (ссылка выше). Жмем по большой кнопке «Download» на главной странице сайта. Распаковываем архив с иконками у себя на компьютере.

Копируем папки «css» и «fonts» в шаблон вашего сайта. Далее, необходимо подключить файл стилей в главном файле шаблона (index.php). В архиве лежат две версии файла – сжатая (минимизированная) и разжатая. Подключаем сжатую версию — font-awesome.min.css.

Не отходя от темы сразу скажу, что данный файл можно подгрузить с CDN – BootstrapCDN или MaxCDN.

Это нужно для того, чтобы уменьшить количество http-запросов на сервер, снижая тем самым нагрузку.

Если у вас файл стилей иконочного шрифта лежит не в папке «CSS», а скажем в корне шаблона, то вам необходимо будет прописать правильные пути до файлов шрифтов иконок в файле «font-awesome.min.css». Если сложно ориентироваться в минимизированной версии, то можете подключить несжатую версию стилей.

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

Давайте рассмотрим, как можно применить иконки от Font Awesome на сайте. Вообще на официальном сайте есть руководство для начала работы, примеры реализации иконок, ну и сама база иконок, можно посмотреть какие иконки входят в набор. Если с английским туго, то можете воспользоваться русскоязычной версией сайта —http://Font Awesome.ru/get-started/.

Итак, для того, чтобы показать икону на сайте необходимо создать тег или и задать необходимые классы. Какие именно? Все зависит от того, какую иконку вы хотите вывести. Идем на официальный сайт в раздел с иконками «Icons» и выбираем необходимую иконку. Для удобства поиска все иконки подразделены на группы.


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

Далее, щелкаем по иконке и попадаем на страницу иконки. Здесь нам в готовом виде уже предложен html-код данной иконки. Например…

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

Итак, иконка у нас отобразилась. Что мы можем сделать с данной иконкой? Мы можем задать ей цвет через правило «color» в css, мы можем увеличить размер иконки, мы можем задать тень через правило «text-shadow», т. е. мы можем проделать через css все те манипуляции, что и для текста.

Цукерберг рекомендует:  Бесплатный курс «Объектно-ориентированное программирование»

Примеры реализации Font Awesome

Если перейти на страницу «Exsamples» (примеры реализации) на официальном сайте, то мы можем увидеть дополнительные возможности, которые уже заложены разработчиками иконочного шрифта. Что это за возможности? Например, мы можем изменить размер иконки на один из предустановленных размеров. Для это просто необходимо дописать соответствующий класс.

Как видим у нас появился дополнительный класс у иконки, который отвечает за ее размер — fa-5x, или fa-4x и т.д.

Также мы можем задать анимацию иконке, добавив соответствующий класс. Например…

Здесь за анимацию отвечают классы — fa-spin и fa-pulse. Чем они отличаются можно посмотреть в примерах на официальном сайте.

Что еще можно сделать с иконками? Мы можем повернуть иконку. Для необходимого поворота также нужно добавить соответствующий класс.

Думаю здесь подробных комментариев не нужно. Например, класс «fa-rotate-90» отвечает на поворот иконки на 90 градусов по часовой стрелке.

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

Использование Font Awesome на компьютере

Теперь давайте разберем как можно использовать шрифт Font Awesome на компьютере, например, в программе Photoshop. Здесь все очень просто — устанавливаете otf-шрифт — Font Awesome.otf. Данный шрифт сможете найти в папке fonts после скачивания архива Font Awesome. Далее воспользуемся страницей-шпаргалкой, которую для нас создали разработчики. Найти вы ее сможете по адресу — http://fortawesome.github.io/Font-Awesome/cheatsheet/ — на официальном сайте, и также русско-язычная версия — http://Font Awesome.ru/cheatsheet/. Как советуют разработчики, сохраните данную страницу в формате PDF, чтобы она всегда была под рукой. Отсюда понадобится копировать иконки юникода. Чтобы отобразить иконку в программе Photoshop необходимо скопировать нужную иконку (именно выделить саму иконку, а не ее название) и вставить в нужном месте в макете. Появится символ прямоугольника с крестиком внутри. Выделяем его и применяем установленный ранее шрифт «Font Awesome Regular».

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

Это то, что касалось Font Awesome. Теперь давайте перейдем к такому сервису, как Fontello. Именно Fontello я использую для генерации шрифтов иконок. Есть у него свои нюансы, чего нет (по крайней мере я не нашел) в Font Awesome.

Fontello

Официальный сайт Fontello — fontello.com. Сайт на английском языке и к сожалению русскоязычной версии сервиса, как у Font Awesome я не нашел. Но интерфейс настолько прост, что в русском языке нет необходимости. Мне лично это не понадобилось.

Чем хорош данный сервис?

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

Добавление иконок Fontello в набор

Для выбора и добавления иконки в набор необходимо просто выделить ее, щелкнув левой кнопкой мыши. Выделенная иконка помечается розовой обводкой. Чтобы найти нужную иконку можно воспользоваться поиском. Ключевые слова следует вводить на английском языке, т.е. значения слов на английском языке. Кстати, в Fontello включен набор иконок от Font Awesome. Так что, если вам понравились какие то иконки в Font Awesome, то вы можете найти их и здесь.

Весь набор выбранных вами иконок можно посмотреть во вкладке «Customize Names».

Удалить иконку из набора можно, щелкнув по крестику или кликнуть повторно по выделенной иконке во вкладке «Select Icons».

Также имеется еще одна вкладка под названием «Customize Codes». Здесь мы можем получить код иконки. Для чего нужен код иконки я расскажу ниже.

Вкладка «Help/Wiki» ведет на страницу проекта в Github, а именно на страницу документации. Правда здесь на английском. Кто знает английский может пройтись и по ней тоже, если станет что-то не понятно.

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

Стоит отметить, что в набор иконок мы можем загрузить и свою иконку. Для этого мы должны подготовить векторное изображение в формате SVG и загрузить в Fontello простым перетаскиванием в поле «Custom Icons». У меня, если честно, так и не получилось добиться хорошего качества кастомной иконки. Здесь скорее всего все зависит от качества самой иконки в SVG.

В поле «font name» мы можем ввести свое название имя шрифта иконок, например, «my-fonts-icons». Название следует вводить латинскими буквами (a-z) и маленькими буквами, а также можно использовать символы подчеркивания — «-» или «_». По умолчанию название — fontello. В архиве названия шрифтов и файлов стилей будут заменены вашим названием.


Когда набор готов мы можем скачать архив файлов иконок. Для этого кликнем по розовой кнопке «Download webfont» в правом верхнем углу. Обратите внимание, что нам сразу показывается количество иконок в наборе.

Сохраняем архив на компьютере и распаковываем. Давайте разберем, что лежит в архиве.

Папка «css» — в ней содержатся файлы стилей. Какой из них использовать читайте ниже.

Папка «font» — в данной папке хранятся шрифты иконок.

Файл «config.json» — файл настроек иконок. Вы можете импортировать обратно ваши иконки в Fontello и работать с ними дальше.

Файл «demo.html» — можно открыть демо-страничку собранных иконок посмотреть их в браузере.

Файл «LICENSE.txt» — файл лицензии, т.е. по какой лицензии распространяются иконки.

Файл «README.txt» — краткая документация на английском языке по использованию иконок Fontello

Подключение иконок Fontello

Иконки от Fontello подключаются практически также как и Font Awesome. Из набора иконок сначала мы подключаем файлы/файл стилей, их несколько. Почему так много? Давайте разберем каждый файл (названия файлов стилей шрифтов указаны по умолчанию).

fontello.css — основной файл стилей fontello

animation.css — данные стили отвечают за анимацию иконок, т.е. нужно, если вы используете анимированные иконки в наборе.

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

fontello-embedded.css — стили со встроенным шрифтом WOFF. Его необходимо использовать, если хотите избежать проблем с CORS в Firefox и IE9, а также если ваши иконки хранятся на отдельном домене. Честно сказать, этим не пользовался. Конкретно сказать не могу.

fontello-ie7.css — основной файл стилей иконок для поддержки браузером ИЕ7

fontello-ie7-codes.css — коды иконок с поддержкой браузера ИЕ7

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

Итак подключаем основной файл стилей (название файла стилей указано по умолчанию) в главном шаблоне сайта (обычно это index.php):

Далее рассмотрим как использовать иконки в шаблоне сайта.

Использование иконок Fontello в шаблоне сайта

Для того, чтобы отобразить иконку в шаблоне нам необходимо добавить соответствующий класс тегу i или span. Можно конечно и div, но лучше будет использовать теги span или i. Какой добавить класс? Идем на сайт fontello и переключаемся во вкладку «Customize Names». Здесь мы видим иконки и справа названия классов. Копируем класс и назначаем его тегу с иконкой.

Теперь давайте давайте разберем как назначить иконку элементу в который мы не можем добавить html-код иконки. Например, элемент выводится через javaScript, а сам код минимизирован. Можно конечно разжать код, найти это место, где создается необходимый элемент и вставить в него тег иконки, но это все долго и муторно. А если вы еще в javaScript не бум бум, извините за выражение… Это можно сделать посредством стилей, к стилям то мы всегда доступ имеем )). Вот этим мне и нравится Fontello. Итак, чтобы добавить иконку элементу необходимо создать псевдоэлемент этого элемента и вывести через правило «content» иконку. Давайте покажу на примере. У нас есть пункт меню:

Давайте в тег «a» добавим иконку. Для начала данному тегу назначим иконочный шрифт fontello (названия файлов шрифтов указаны здесь по умолчанию) через правило «font-family». Код css будет следующим:

Далее создаем псевдоэлемент тегу «a» и выведем иконку, передав через правило «content», соответствующий код иконки. Чтобы узнать код иконки достаточно открыть общий файл стилей иконочного шрифта — fontello.css и ниже, там, где идут коды иконок найти иконку с нужным классом. Я, к примеру, возьму иконку с классом «icon-camera-alt». Данная иконка присутствует в моем наборе. Ищем в кодах класс «.icon-camera-alt::before» и копируем правило «content» вместе с кодом.

В итоге код будет следующим:

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

Также код иконки можно получить и на сайте Fontello. Переключитесь во вкладку «Customize Codes». В данной вкладке указаны иконки вашего набора с кодами для вывода. Вы можете переопределить свой код при необходимости. Но это необходимо сделать перед загрузкой набора.

Если взять первую иконку, то в css вывод иконки будет следующим:


Использование иконок Fontello в Photoshop.

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

Перед загрузкой архива с иконками щелкаем по иконке настройки и выбираем в списке «Advanced font settings…». Далее в модальном окошке настроек переключаемся в пункте «Encoding» с «Private Use Area» на «Text characters», сохраняем. Качаем архив со шрифтами и распаковываем на компьютере.

Далее из папки «font» находим шрифт с расширением «.ttf» и устанавливаем его в ОС. Шрифт лучше установить так, как описано в данной статье. Не поленитесь почитать. Теперь в самом фотошоп ситуация обстоит также как и в случае с Font Awesome — копируем символ иконки и вставляем в макет, выбираем шрифт для символа (появившийся прямоугольник с крестиком) — fontello Regular (это в моем случае, т.к. шрифт у меня идет по умолчанию, у вас он может быть с вашим именем). Только, где скопировать саму иконку в юникод? Идем все в ту же вкладку «Customize Codes» и копируем символ иконки для фотошоп.

Цукерберг рекомендует:  Используем короткий код при разработке темы WordPress

Вот, что у меня получилось:

Импорт иконок обратно в Fontello

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

Если помните в архиве у нас лежал файл «config.json». Так вот в данном файле хранятся все созданные нами иконки. Чтобы сделать импорт нам следует перейти на сайт fontello, кликнуть по значку настроек и выбрать «Import».

Далее находите файл config.json у себя на компьютере и выбираете его. После этой операции вы увидете свой набор иконок.

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

Из предложенных ссылок иконочных шрифтов присутствовал также сервис icomoon.io, но про него писать я не буду, т.к. статья итак получилась большой. Но если вы разберетесь в Font Awesome и Fontello, то уверен, что и Icomoon вам освоить будет несложно.

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

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

Всем удачи, всем пока.

Заур Магомедов

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

IcoMoon

Видео: IcoMoon

CSS код для IcoMoon и примеры использования этого шрифта-иконок. Ниже Вы видите сам CSS код и таблицу с примерами классов, содержимого (content:»») и результат.

Шрифты-иконки

Например, Вы можете добавить такие классы на странцу или сайт, а потом их легко использовать в HTML конструкциях

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

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

Как видите, все очень просто. Именно поэтому мы создали данную страницу, чтобы Вы смогли увидеть сразу CSS код, html код и готовый результат, чтобы не использовать дополнительное ПО.

Что такое Icon Fonts? Знакомимся с помощью FontAwesome и IconMoon

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

Что такое Icon Fonts?

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

Достоинства и недостатки шрифтовых иконок.


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

  • К ним можно применить любой CSS эффект.
  • Они масштабируемы, поскольку создаются с помощью векторной графики. Это позволяет увеличивать или уменьшать их без потери качества.
  • Загрузка производится посредством единственного, в крайнем случае, пары HTTP запросов, вместо большого их количества, которые могут потребоваться для загрузки растровых изображений.
  • Они загружаются быстрее, что связано с их малыми размерами.
  • Их поддержка имеется во всех браузерах (даже таких как IE6).

Итак, получается, что шрифтовые пиктограммы идеально подходят для любых случаев? Конечно, нет. Несмотря на то, что они являются отличным средством улучшения дизайна, им также присущи некоторые ограничения. Так, к примеру, если вместо обычной иконки вы хотите показать сложное изображение, то Icon Fonts вам не поможет.

Они, к тому же, зачастую ограничены одним цветом, что можно изменить лишь применив некоторые CSS трюки. Более того, шрифтовые иконки создаются под определенные сеточные шаблоны, так их размеры могут быть 16х16, 32х32, 48х48 пикселей есть, конечно, и другие варианты. И если вы измените используемую сеточную систему на другую с размерностью, к примеру, 25х25, то того же четкого результата вы можете уже не получить (однако ситуацию можно исправить с помощью определенных CSS свойств).

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

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

Вашему вниманию также будут представлены четыре примера различного использования Icon Fonts.

Пиктогаммы FontAwesome.

FontAwesome представляет собой богатую коллекцию иконок, состоящую из 439 экземпляров. Эта библиотека абсолютно бесплатна как для личного, так и для коммерческого использования. Изначально она разрабатывалась с целью использования в рамках системы Bootstrap, однако ее применение не ограничивается исключительно этим фреймворком.

Начинаем работать с FontAwesome.

Самый удобный путь включения иконок FontAwesome в свой проект лежит через CDN (сеть доставки контента). Если же вам необходимо работать off-line, то без загрузки полного пакета иконок вам не обойтись.

Необходимо также отыскать и включить в директорию сайта CSS файл и сгенерированную системой папку, содержащую шрифты различных форматов. Далее добавляем в HTML разметку фрагмент кода, подключающий наш CSS файл. В заключение следует убедиться в корректности путей, используемых в URL адресах параметров @font-face и src скачанного CSS файла, которые должны совпадать с соответствующей директорией вашего сайта. Для того, чтобы узнать все возможные способы включения этой библиотеки иконок в свой проект, обратитесь к прилагаемой инструкции, описывающей необходимые шаги по ее подключению.

Эти иконки должны размещаться внутри элемента span либо i , которым необходимо назначить два класса. Первый — это класс fa , а имя второго должно соответствовать имени пиктограммы, которую вы хотите использовать, к примеру, fa-home . Имена всех доступных в данной библиотеке иконок перечислены в прилагаемой памятке.

Для дополнительной настройки вида иконок можно применять другие предопределенные классы, которые представлены здесь вместе с примерами их использования.

Что же, давайте увидим пакет FontAwesome в действии, используя его в различных ситуациях.

FontAwesome — пример первый.

Для начала давайте займемся созданием вертикального навигационного меню. Первое, что необходимо сделать, это обернуть нужные иконки в элементы i и увеличить их до размера, соответствующего величине их контейнера, что достигается использованием предопределенного класса fa-2x . Далее производим необходимую CSS стилизацию.

Вот пример разметки для двух элементов навигационного меню:

А это соответствующий CSS код:

nav li:not(:first-child) <
margin-top: 1px;
>

nav li a <
outline: none;
position: relative;
width: 100%;
height: 100%;
>

nav i <
color: steelblue;
vertical-align: middle;
>

nav li a:after <
background: #ededed;
content: attr(data-name);
display: none;
margin-left: 1px;
width: 160px;
height: 80px;
left: 80px;
position: absolute;
font-size: 1.2em;
>

nav li a:hover:after <
display: inline-block;
>

FontAwesome — пример второй.

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

HTML код для одной иконки выглядит вот так:

А это код для стилизации:


section i <
vertical-align: middle;
transition: color.3s ease-in-out;
>

section a:nth-child(1):hover i <
color: #3b5998;
>

Результат такой работы:

FontAwesome — пример третий.

В этом, третьем примере мы применяем иконки к форме входа в аккаунт. Выполняем действия, аналогичные первым двум примерам. Отличие лишь в том, что здесь мы используем другой предопределенный класс fa-fx , фиксируя тем самым из ширину (равную примерно 1,25 em).

HTML и CSS код схож с приведенными выше вариантами. Ниже вы можете увидеть результат их работы:

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

Иконки IcoMoon.

Другим популярным решением шрифтовых иконок является IcoMoon, в рамках которого представлены два пакета. Первый можно использовать свободно, а второй Premium, предусматривающий расширенные возможности. Дополнительную информацию по этим двум пакетам иконок можно найти здесь. В зависимости от выбранного варианта вам будет доступно различное количество иконок и их формат. Так, к примеру, бесплатная версия содержит 450 экземпляров, а максимальная — 1266.

Помимо этих пакетов, IcoMoon предоставляет онлайн приложение, позволяющее выполнять поиск и загрузку более 3500 бесплатных иконок. Данное приложение, к тому же можно использовать для некоторых простейших операций по редактированию иконок, которым можно отнести их ротацию, смену цвета и другое.

Здесь вам также предоставляется возможность внедрения собственных пиктограмм или даже создания собственных наборов шрифтовых иконок. Для этого имеется несколько бесплатных и платных тарифов (с базовыми и расширенными возможностями).

Принцип работы с IcoMoon.

Выбранный вами для загрузки пакет содержит иконки различных форматов (таких, к примеру, как SVG, AI или PSD). При этом данный веб-сервис позволяет загружать пиктограммы как в SVG формате (мы не будем этого делать), так и в виде шрифтовых иконок.

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

Существует также возможность включения ссылки быстрого использования непосредственно в ваш HTML код (будем считать ее ссылкой на CDN ) и после этого вы можете использовать выбранные иконки. Однако эта опция постоянно доступна только в максимальной версии, хотя в базовой версии она тоже присутствует, правда лишь временно, только на один день.

Аналогично иконкам из рассмотренной выше библиотеки FontAwesome, каждая из иконок IcoMoon тоже должна быть включена в состав элемента . Затем вам следует присвоить элементу класс, имя которого должно соответствовать имени пиктограммы, которую вы хотите включить в ваш проект (например, icon-home ). Кроме того у вас есть возможность редактирования имен иконок (т.е. вы можете устанавливать свой префикс вместо используемого по умолчанию). Это делается до загрузки пиктограмм через вкладку Preferences (Предпочтения).

Давайте обратимся к примеру.

Цукерберг рекомендует:  Программы - Заочное обучение программированию
Пример использования IcoMoon.

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

Вот разметка для двух иконок:

section span <
padding: 15px 0;
font-size: 5em;
display: block;
color: steelblue;
transition: all.2s ease-in-out;
>

section li:hover span <
transform: translateY(-10px);
>

Результат работы последнего примера можно увидеть здесь.

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

Значения иконок Font Awesome для CSS

Детальная таблица значений иконочного шрифта Font Awesome

  • ГлавнаяНовости статьиCSS , HTML Список значений шрифта Awesome для использования в css

Список значений шрифта Awesome для использования в css

  • 4.3/5
  • 8 оценок
Очень плохо! Плохо Нормально Хорошо Очень хорошо!
0% 12.5% 12.5% 12.5% 62.5%

Приветствую. Наверное вы уже знаете о таком замечательном инструменте как иконочный шрифт от Font Awesome для сайта.

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

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

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

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

Шрифтовые иконки и сервис IcoMoon

November 12, 2013

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

Чем объясняется подобная распространенность таких иконок и что они из себя представляют вообще? Само название шрифтовые — говорит о многом.

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

Объяснения объяснениями, но лучше на практике раз попробовать с ними столкнуться или поработать. Чтобы не забираться в дебри, скажу сразу — каждый из нас сталкивался хоть раз в жизни с такими шрифтами.

Для этого откройте Microsoft Word, выберите в нем любой из наборов шрифтов — “Wingdings”, “Wingdings 2”, “Wingdings 3” — и попробуйте попечатать в пустом документе. Вместо “букав” будут печататься всякие разные символы:

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

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

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

Упоминание одного из таких сервисов (кстати, очень популярного) я встретил недавно, просматривая видеокурс “TutsPlus — PSD to WordPress minimal portfolio”. В одном из уроков автор Adi Purdila говорит о том, что сервис IcoMoon очень легко и просто использовать для целей применения шрифтовых иконок на сайте.

Раз сервис IcoMoon легко и просто использовать — тогда это как раз для нас! Давайте попробуем выбрать с его помощью несколько нужных нам символов и “прикрутим” их к нашему проекту.

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

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

Когда нужный набор иконок выбран, переходим вниз страницы и нажимаем кнопку Font. Откроется промежуточное окно, в котором представлен список всех выбранных для скачивания иконок и их характеристики:

Здесь также можно отредактировать необходимые иконки — название, код и так далее. Если все устраивает, нажимаем кнопку Download , чтобы скачать выбранный набор в виде архива:

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


Директорию со всем ее содержимым просто перекидываем в проект “как есть”, а файл открываем в HTML-редакторе.

Нам потребуется его содержимое, которое также можно перенести в css-файл проекта почти без изменений. Но рассмотрим содержание более подробно:

… эти строчки кода “обычные” — здесь происходит подключение скачанных шрифтов. Только нужно немного исправить путь к файлам:

… эти строчки — CSS-стили для скачанных шрифтовых иконок. Точнее — здесь приводиться к общему знаменателю отображение этих шрифтов:

Классы для скачанных шрифтовых иконок и пример их применения в HTML-странице. В данном случае — через псевдоэлемент .

Как видно из кода, иконки можно очень легко редактировать черед правила CSS. Давайте немного пофантазируем и преобразуем вышеприведенный код:

Вот мы и познакомились со шрифтовыми иконками. Все оказалось просто и приятно в работе.

RxJs — map

Первый «серьезный» метод в моей RxJs-копилке знаний. На самом деле все просто — этот метод получает на вход поток, обрабатывает каждый ev. … Continue reading

Иконочные шрифты для верстальщиков

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

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

Давайте рассмотрим бесплатные и полезные пакеты иконочных шрифтов.

Font Awesome — данный бесплатный пакет иконок не нуждается в рекламе и известен всем frontend-разработчикам, да и не только им. В коллекции шрифта 675 иконок (на данный момент доступна версия 4.7.0). Пожалуй, один из самых популярных бесплатных шрифтов, который используется на многих сайтах и фреймворках. На сайте доступны примеры по работе с Font Awesome. Если еще не пользовались им, то рекомендую взять в работу.

IcoMoon — в этом бесплатном пакете вам будут доступны 490 векторных иконок. Если вам не терпеться посмотреть на доступные иконки.

Linearicons — менее богатый пакет на количество иконок (всего 170 иконок для бесплатной версии). В принципе есть все базовые иконки для веб-разработчика.

Ionicons — данный чудеснейший пакет включает в себя 730 премиальных иконок и доступен совершенно бесплатно. Среди такого количества я думаю можно найти все что нужно для своего веб-проекта. В шрифт включены иконки для ценителей плоского и минималистического дизайна. Однозначно, рекомендую!

Ligature Symbols — бесплатный шрифт без лишних иконок. Содержит все необходимые иконки для web. Для тех, кому важна скорость загрузки и не надо ничего лишнего. Кстати, не так уж и мало иконок — около 240 штук.

Stroke 7 Icon Font Set — вас ждут 202 плоские иконки. Приятно для взгляда и очень современно. Рекомендую ознакомиться.

Typicons — 336 бесплатных векторных иконок, которые смотрятся довольно интересно.

Themify Icons — 320+ бесплатных иконок для веб-дизайна и приложений. Специально созданы для ценителей Apple iOS 7.

Foundation Icon Fonts 3 — в принципе обычные иконки, но возможно кому-то именно этот пакет подойдет для работы. Иконок в нем около 283 штук.

Sosa — пакет реалистичных иконок от команды разработчиков tenbytwenty. Иконок мало, так что для крупного проекта не подойдет.

Linea — на сайте для удобства доступно несколько бесплатных пакетов с векторными иконками: базовый пакет, погода, музыка, коммерция, программное обеспечение, разработка, указатели. Плоский дизайн и аккуратность присутствует. В сумме свыше 730+ иконок.

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

Спасибо и следите за обновлениями на моем сайте.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Иконки Font Awesome для UIkit 3

Создание

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

Первая проблема, с которой я столкнул это где достать иконки svg, да еще и размером 20×20. Все что удалось найти это были либо огромные иконки исходники, либо уже маленькие всего 14px.

На помощь с этой проблемой пришел сервис icomoon залив, импортировав туда иконки и изменив параметры экспорта я получил практически чистые иконки в размере 20×20.

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

Так или иначе все после некоторых правок, я получил полностью готовый набор иконок Font Awesome для UIkit 3.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих