Иконочные шрифты
В этой статье я расскажу как создавать и использовать иконочный шрифт с помощью gulp. Используем плагины gulp-iconfont и gulp-iconfont-css.
Устанавливаем плагины и прописываем зависимости.
Параметр fontName обязателен, это имя нашего шрифта.
Пишем таск
А теперь подробнее:
Берем все иконки(путь указывается относительно gulpfile) Далее внутри таска прописываем шаблон для scss-файла, с помощью которого будут использоваться иконки:
fontName: fontName — название шрифта, которое объявлено ранее.
fontPath: ‘../fonts/icons/’ — путь для шрифта.
targetPath — путь для scss-файла.
Создаем шрифт
Предварительно проверив все пути(т.к. у вас может быть другое расположение папок) запускаем таск. Если все прошло правильно, в указанной в параметре fontPath папке лежит шрифт в формате svg, а в targetPath теперь scss файл, который необходимо импортировать в sass вашего проекта. Он состоит из трех основных частей:
Общее объявление тихих классов, присвоение им свойств шрифта
Каждому тихому классу — свою иконку !
Редактируем шрифт на iconmoon
Для того чтобы шрифт было удобнее использовать, отредактируем его на iconmoon. В нашем случае мы загружаем не отдельные иконки, а шрифт целиком(тот самый который сгенерировал gulp). 
После загрузки появится список иконок. Каждую иконку нужно обработать в визуальном редакторе. Нажимаем на значок редактирования, а потом на иконку. 
Откроется окно обработки иконки. Включаем сетку(если она выключена) и выставляем размер 16. В верхем левом углу отображен размер иконки. 
Далее нужно привести иконку к размеру 16×16. Для этого нужно “поиграться” с рамером сетки и размером иконки. Вот мой способ(чисто интуитивно пришел к нему):
текущий размер 17.3, отделяем от него дробную часть — 3.
переводим сетку в режим 20 и увеличиваем иконку на число найденное до этого(3).Далее переводим сетку обратно в 16 — должно получиться целое число, которое доводим до 16.
Итого мы получаем иконку 16X16. 
Далее размещаем иконку по центру и оставляем один пустой ряд клеточек по сторонам. 
Иконка готова к использованию. Иногда не получается сделать иконку 16×16 из-за нарушения пиксельной сетки.В таком случае лучше сделать иконку шире.
Использование
Скачиваем шрифт с iconmoon, для этого выделяем все иконки(select all в меню сета) и нажимаем generate font: 
Далее в настройках прописваем имя шрифта(которое мы придумали ранее) 
Далее скачиваем архив, копируем файлы шрифта(папка fonts) в проект. Также сохраните файл selection.json, он может понадобиться для редактирования шрифта. Теперь шрифт можно использовать в проекте.Например мы хотим добавить иконку achievment к какому-либо элементу(назовем его .test_selector)
Теперь, чтобы изменить её цвет или размер, просто пишем эти свойства в before элемента:
Иконка добавлена: 
На этом все.
MagentaWAVE
Примеры и готовые решения для оформления блога и сайта. Разработка и дизайн шаблонов Blogger.
Подключение и использование иконочных шрифтов
Чтобы просто и быстро добавить масштабируемые картинки к различным элементам сайта, без использования спрайт-изображений, можно применить иконочный шрифт, в котором собраны все необходимые иконки в одном стиле. В подавляющем большинстве случаев, символы добавленные таким образом, правильно отображаются в браузере интернет-пользователя и остаются четкими при увеличении и уменьшении масштаба веб-страницы. И хотя сами изображения элементов обладают довольно простым, но сегодня очень модным дизайном, их оформление, например цвет и фон, можно изменить без труда.
Сервисов предоставляющих бесплатные, готовые сборки шрифтовых картинок достаточно, при этом разнообразие иконок в них может удовлетворить практически любые потребности при создании сайта или оформлении блога. В данной заметке речь пойдет о том, как подключить иконочный шрифт и использовать его при оформлении сайта.
Два наиболее популярных ресурса это Font Awesome и Fontello, первое(и главное) — они бесплатны; второе — Font Awesome — предоставляет публичную ссылку для прямой загрузки шрифта со своего хостинга, то есть не нужно использовать свой или искать сторонний хостинг для размещения необходимых файлов, в Fontello можно собрать свой собственный шрифт, загружая на сайт иконки в .svg формате, или выбрать из общего набора именно те, которые нужны в данном случаи, а не загружать всё что есть.
Как подключить иконочный шрифт к сайту
Способов подключения на данный момент существует три:
1. Если доступна, использовать общую(публичную) прямую ссылку на хостинг сервиса, которую нужно разместить внутри раздела <head>, лучше повыше или перед закрывающим </head>, это уже как пойдет.
Для Font Awesome последняя версия ссылки выглядит так:
2. Скачать архив со всеми необходимыми файлами, извлечь содержимое папок CSS и Fonts, разместить извлеченные файлы на хостинге своего сайта в соответствующие папки и указать на них ссылки в секции <head>. </head> вашего сайта следующим образом —
— дать путь только к папке:
Как использовать иконочный шрифт на сайте
У каждого выбранного символа есть название и код, посмотреть их можно как на странице официального сайта, так и на демо странице из загруженного архива. Название, по совместимости, является так же и добавочным классом элемента, для которого нужна иконка, код используется как UTF-символ иконки. Способы добавления символов на страницу зависят от варианта подключения шрифта.
Если воспользоваться вторым вариантом — подключить шрифт используя CSS-файлы, возможно добавление знаков как с помощью класса, так и кода:
1. Создать пустой элемент с классом иконки и добавить его перед нужным блоком:
Работа со шрифтом Awesome
Иконочный шрифт Awesome — это простой шрифт, содержащий в себе в место букв символы и специальные знаки, которые легко оформлять через CSS по такой же аналогии как делаем мы это с простым шрифтом. То есть, при помощи CSS можем установить для них цвет, поменять размер, задать тень и многое другое.
В библиотеке Font Awesome версии 4.7.0 содержится 646 иконок различных тематик, которые можно задействовать как для коммерческих проектов так и личного использования абсолютно бесплатно.
- Содержание:
1. Как подключить шрифт Awesome
Можно выделить два способа, это использование сторонних ресурсов от куда будем подгружать файл font-awesome.css и подключать шрифты через CSS или следующий способ, это скачиваем к себе архив с шрифтом Awesome и подключаем его при помощи тега <link> . Далее более подробно разберем каждый из этих способов.
Способ 1
Используем сторонние сервисы CDNJS или BootstrapCDN. Размещенный на них файл font-awesome.css мы подключаем при помощи данных строк:
Для подключения с CDNJS:
Для подключения с BootstrapCDN:
Этот код нужно добавить в раздел <head> желательно выше основного подключения style.css . После того как файл подключили, можно приступать использовать иконки на своем ресурсе.
Способ 2
Переходим на сайт Font Awesome, и скачиваем архив со шрифтом. Распаковав архив мы увидим несколько папок. Для установки шрифта нам понадобятся две папки это css и папка fonts . Закачиваем их на свой сервер где расположен сайт, если есть папки с таким названием, то просто добавляем из них содержимое. Затем подключаем файл font-awesome.css или font-awesome.min.css при помощи тега <link> , только теперь из папки css нашего сайта.
Используем полную версию:
Используем минимизированную версию:
2. Как работать с иконками Font Awesome
На веб-страницу иконки можно добавить двумя способами, первый способ это использовать соответствующий класс иконки и указать его для элемента <i></i> или <span></span> , но предварительно нужно прописать класс fa каждому из элементов.
Второй способ, добавляем иконки при помощи псевдоэлементов ::before и ::after , а так же соответствующего значения свойства content для иконки. Обязательно указываем font-family: FontAwesome иначе шрифты работать не будут.
2.1. Как увеличить иконку
Что бы увеличить размер иконки достаточно в css прописать font-size и задать параметр. Так же можно увеличить размер иконки относительно его контейнера используя определенные классы fa-lg (увеличивает на 33%), fa-2x , fa-3x , fa-4x или fa-5x .
| fa-lg | fa-2x | fa-3x | fa-4x | fa-5x |
2.2. Как фиксировать ширину иконки
Для фиксирования ширины иконки используется класс fa-fw , задав его, мы фиксируем ширину тем самым можем их использовать как для навигации так и для оформление списков.
2.3. Как маркировать списки LI иконками
Для замены стандартных маркеров в блоке <ul>. </ul> используются классы fa-ul и fa-li .
- элемент списка
- элемент списка
- элемент списка
- элемент списка
2.4. Кавычки для цитат обрамленные в рамке
Что бы установить рамку для иконки используем класс fa-border , а при помощи pull-right и pull-left можем добавят кавычки для текста.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus congue, posuere libero in, porta sapien. In sed elit lectus. Sed lacus elit, semper vitae felis id, sodales congue sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus congue, posuere libero in, porta sapien. In sed elit lectus. Sed lacus elit, semper vitae felis id, sodales congue sapien.
2.5. Анимированные иконки
Что бы анимировать любую иконку достаточно добавить класс fa-spin для круговой анимации и для пульсирующей анимации fa-pulse . Так же можно использовать классы fa-spinner , fa-refresh , и fa-cog .
| fa-spin fa-cog | fa-spin fa-spinner | fa-spin fa-refresh | fa-spin fa-circle-o-notch | fa-pulse fa-spinner |
2.6. Поворачивание и отзеркаливание иконок
Для поворота иконки используется класс rotate-* в котором указываем числовое значение на какой градус иконка будет повернута. Для зеркального отображения используется два класса это fa-flip-horizontal для горизонтальное отзеркаливание и вертикального icon-flip-vertical .
| normal | fa-rotate-90 | fa-rotate-180 | fa-rotate-270 | fa-flip-horizontal | fa-flip-vertical |
2.7. Группирование иконок
Иконки можно группировать накладывая их друг на друга, тем самым комбинируя их между собой. Чтобы создать группу из иконок, задаем класс для родителя fa-stack . Можно изменять размер иконки, класс fa-stack-1x задает стандартный размер, а класс fa-stack-2x для увеличения. Так же можно увеличивать при помощи классов fa-lg , fa-2x , fa-3x , fa-4x , или fa-5x .
| fa-twitter на fa-square-o | fa-flag на fa-circle | fa-terminal на fa-square | fa-ban на fa-camera |
2.8. Примеры использование иконок в Bootstrap 3
Иконки Awesome прекрасно работают в Bootstrap и это хорошо видно из данных примеров.
3. Группы иконок
В версии Font Awesome 4.7 включены новые 41 иконка. Иконки разбиты на группы для удобного отбора при помощи поиска или по навигации. У каждой иконки представлен класс и CSS код для вставки при помощи свойства content.
Иконочные шрифты для сайта — что это и как использовать?
Добрый вечер. Нужно ли эту строку прописывать если да, то где?
У меня ее браузер, как ошибку подсвечивает, удаляю ее ошибок еще больше… Кто может подсказать?
Вот архив https://drive.google…_ynLSUFW5An0K8w
А как получить Unicode иконки из фотошопа и/или узнать ее класс? К примеру, дизайнер использовал в макете некую иконку из FontAwesome, а верстальщику нужно вставить ее код в CSS, или прописать ее класс в HTML. Иногда бывает сложно найти иконку визуально в общем списке…
Иконки в фотошоп вставляются в юникод, так что никакого класса нет. Прихрдится визуально искать. По крайней мере я так делаю.
Вот и я тоже. Жаль что нет такой возможности — количество иконок в шрифтах постоянно увеличивается, со временем будет все сложнее искать иконки с не очевидным названием. На одном проекте минут 10 убил на поиск иконки, которая как оказалось называется money, уже в глазах от них рябило В любом случае, спасибо за ответ.
Заур, не пробовали плагины, которые интегрируют иконки FontAwesome в PS? Есть-ли подобные плагины для Fontello?
FontAwesome или Fontello это обычный шрифт и устанавливается, как обычный шрифт. Про плагины ничего не знаю, может и есть какие…
FontAwesome PS, например
Ну если есть такие, еще лучше. Да, вообще для фотошоп много чего есть…
Довольно познавательно, Заур, пишите. Я делал всё как по тексту, получилось, конечно, не сразу, с фотошопом пришлось поднапрячься, но в итоге всё-таки шрифты работают. Идея от перехода с обычного на иконочный шрифт была давно, всё же он более необычно смотрится, что добавляет изюминку сайту, которая, порой, может играть весомую роль у потенциального клиента. Да и просто читать так проще
Спасибо, что заценили мой талант
делала всё по инструкции, но у меня не работает.Удалила и переставила шрифт, заново открыла фотошоп, но ничего не поменялось. Иконка отображается перечеркнутым квадратом и не реагирует на смену шрифта. Также фотошоп не видит шрифт при поиске, но при этом он есть в списке и отображается с миниатюрами иконок. Не могу понять в чем проблема. У меня есть ещё и FontAwesome, который работает отлично и с ним никогда не было таких проблем.