Шрифт icomoon: Icon Font & SVG Icon Sets ❍ IcoMoon


08.12.1970 Facebook Twitter LinkedIn Google+ Разное


Содержание

Иконочные шрифты IcoMoon

Вы здесь: Главная — HTML — HTML Основы — Иконочные шрифты IcoMoon

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

Раз это шрифт, то можно использовать стили для его редактирования — изменять цвет, масштабировать без потери качества, добавлять тени.

Векторизация растровых изображений

Обычно к макетам, сделанных на заказ, дизайнеры прикладывают иконки в формате SVG. Что делать если вам попался на верстку макет без специально подготовленных векторных иконок? Вставлять их на сайт в растровых форматах PNG или JPG, не вариант, из-за пикселизации на больших разрешениях.

Сделаем экспорт иконок в PNG и займемся их векторизацией. Для векторизации воспользуемся онлайн-конвертером pngtosvg.

Шаг 1: Выберите изображение в формате PNG или JPG на своем компьютере.

Шаг 2: Выберите количество палитр для вашего выходного векторного файла.

Шаг 3: Установите опцию Упростить, чтобы сгладить вывод.

Шаг 4: Нажмите «Создать»



Как создать иконочный шрифт?

Для того чтобы создать свои собственные CSS шрифты с иконками, вам необходимо перейти в раздел IcoMoon App, загрузить SVG изображения и нажать на кнопку «Generate Font».


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



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


Далее скачиваете (кнопка Download) и распаковываете архив.

Как установить иконочные шрифты на сайт?

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

В скаченном архиве еще есть demo.html, откуда можно взять код иконки и вставить в нужное место на странице.

<span></span>

Как установить иконочные шрифты на WordPress?

Загрузим по FTP папку Fonts в тему

WordPress.

В админке WordPress перейдем во вкладку -> «Внешний вид» -> «Редактор тем» -> «Таблица стилей (style. css)» и перенесем стили в начало основного файла стилей. Для вывода иконок на сайте, вставляем тег span с определенным классом в нужное место исходного кода.

Библиотека IcoMoon насчитывает 5500+ бесплатных иконок.

  • Создано 26.06.2020 10:14:58
  • Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

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

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Создание собственного шрифта значков с помощью IcoMoon и Less

В настоящее время использование значков шрифтов довольно популярно и полезно. Все основные интерфейсные среды (такие как Bootstrap , Foundation , Semantic UI , UIkit и Pure ) используют какой-либо вид шрифта значков. И это не без причины. Использование значка шрифта приносит несколько важных преимуществ.

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

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

Зачем мне создавать библиотеку пользовательских значков?

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

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

  • Он может включать в себя только те значки, которые вы хотите и нуждаетесь.
  • Он может комбинировать иконки из разных наборов иконок (у IcoMoon App их много).
  • Это может быть легко настроено (вы можете добавлять / удалять иконки, как вы хотите).
  • Это полностью портативный и автономный.
  • Файлы CSS и шрифтов будут намного меньше по размеру.

Как видите, есть много причин для создания собственной библиотеки иконок. Итак, давайте сделаем это.

Создайте пользовательский шрифт с помощью приложения IcoMoon

Мы назовем наш проект Пикси. Поэтому первое, что нам нужно сделать, это создать новую папку проекта и назвать ее Pixie .

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

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

Идите вперед и откройте приложение IcoMoon . Из набора значков IcoMoon выберите следующие 22 значка, выделенных на двух изображениях ниже:

Когда они выбраны, нажмите кнопку «Шрифт», а затем нажмите кнопку «Скачать». После icomoon.zip файла icomoon.zip перейдите к нему и дважды щелкните, чтобы открыть его. Здесь нам нужно получить папку со шрифтами . Так что возьмите его и распакуйте в папку проекта.

Теперь мы готовы перейти к следующему шагу.

Постройте библиотеку с меньшими затратами

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

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

pixie.less и поместите следующий код в начало файла.

 // Variables //=========== @icon-font-path: "fonts/"; @icon-font-name: "icomoon"; @font-size-big: 2em; @font-size-medium: 1.5em; @font-size-small: 0.75em; @icon-vertical-align: -15%; @color-success: green; @color-info: blue; @color-warning: orange; @color-danger: red; @linkbutton-color: #444; @linkbutton-background-color: #eee; 

Далее, под приведенным выше кодом, поместите следующие миксины Less:

 // Mixins //======== .border-radius(@radius) { -webkit-border-radius: @radius; border-radius: @radius; } .box-shadow(@h: 0em; @v: 0em; @blur: 0em; @spread: 0.1em; @inset: inset) { -webkit-box-shadow: @arguments; box-shadow: @arguments; } .
rotate(@angle) { -webkit-transform: rotate(@angle); -ms-transform: rotate(@angle); transform: rotate(@angle); } .scale(@x;@y) { -webkit-transform: scale(@x,@y); -ms-transform: scale(@x,@y); transform: scale(@x,@y); } .animation(@name; @duration: 2s; @iteration: infinite; @timing: linear) { -webkit-animation: @arguments; animation: @arguments; } .keyframes(@prefix) when (@prefix = webkit) { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } } .keyframes(@prefix) when (@prefix = none) { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } .keyframes(@prefix) { }

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

  @font-face { font-family: 'Pixie'; src: url('@{icon-font-path}@{icon-font-name}.eot'); src: url('@{icon-font-path}@{icon-font-name}.
='pixie icon-'] { font-family: 'Pixie'; font-style: normal; font-weight: normal; font-variant: normal; line-height: 1; display: inline-block; padding: 0.3em 0.3em; margin: 0em 0.1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

Здесь мы включаем заявленный выше шрифт и устанавливаем некоторые типографские свойства. Для правильной визуализации значков важно установить для свойства display значение inline-block . Мы также немного margin свойства padding и margin чтобы добавить немного места. Наконец, мы добавляем две последние строки для лучшего рендеринга шрифтов в браузерах и на разных устройствах.

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

  .pixie.icon-pencil {&amp;:before{content: "\e603";}} . pixie.icon-image {&amp;:before{content: "\e60d";}} .pixie.icon-film {&amp;:before{content: "\e613";}} .pixie.icon-quotes {&amp;:before{content: "\e676";}} .pixie.icon-spinner {&amp;:before{content: "\e67c";}} .pixie.icon-list {&amp;:before{content: "\e6b5";}} .pixie.icon-numbered-list {&amp;:before{content: "\e6b6";}} .pixie.icon-link {&amp;:before{content: "\e6c3";}} .pixie.icon-spell-check {&amp;:before{content: "\e700";}} .pixie.icon-bold {&amp;:before{content: "\e744";}} .pixie.icon-underline {&amp;:before{content: "\e745";}} .pixie.icon-italic {&amp;:before{content: "\e746";}} .pixie.icon-strikethrough {&amp;:before{content: "\e747";}} .pixie.icon-omega {&amp;:before{content: "\e748";}} .pixie.icon-table {&amp;:before{content: "\e74b";}} .pixie.icon-paragraph-left {&amp;:before{content: "\e754";}} .pixie.icon-paragraph-center {&amp;:before{content: "\e755";}} .pixie.icon-paragraph-right {&amp;:before{content: "\e756";}} . pixie.icon-paragraph-justify {&amp;:before{content: "\e757";}} .pixie.icon-indent-increase {&amp;:before{content: "\e758";}} .pixie.icon-indent-decrease {&amp;:before{content: "\e759";}} .pixie.icon-code {&amp;:before{content: "\e75c";}} 

Иногда нам может понадобиться использовать значок в качестве ссылки или кнопки. Поэтому мы добавляем код, который делает значок похожим на круглую кнопку, когда он обернут тегом <a></a> , как показано ниже:

  a>.pixie.linkbutton { background-color: @linkbutton-background-color; color: @linkbutton-color; .border-radius(100%); -webkit-box-shadow: none; box-shadow: none; } a>.pixie.linkbutton:hover { background-color: darken(@linkbutton-background-color, 5%); } 

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

  .pixie.circular { .border-radius(100%); . box-shadow(); } .pixie.square { .box-shadow(); } 

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

  .pixie.big { font-size: @font-size-big; vertical-align: @icon-vertical-align; } .pixie.medium { font-size: @font-size-medium; vertical-align: @icon-vertical-align; } .pixie.small { font-size: @font-size-small; } 

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

  .success { color: @color-success; } .info { color: @color-info; } .warning { color: @color-warning; } .danger { color: @color-danger; } 

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

  .pixie.flipped-h { .scale(-1, 1); } .pixie.flipped-v { .scale(1, -1); } 

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

  .pixie.rotated-right { .rotate(90deg); } .pixie.rotated-down { .rotate(180deg); } .pixie.rotated-left { .rotate(-90deg); } 

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

  .pixie.spin { .animation(spin); } @-webkit-keyframes spin { .keyframes(webkit); } @keyframes spin { .keyframes(none); } 

Теперь пришло время скомпилировать наш файл .css в .css . Самый быстрый способ сделать это — если вы никогда не работали с языком Less — использовать онлайн-компилятор, такой как WinLess . Просто скопируйте весь контент pixie.less и вставьте его в левую панель компилятора. Затем на правой панели вы увидите скомпилированный код CSS. Скопируйте скомпилированный код и вставьте его в новый файл с именем pixie.css и поместите в папку проекта. Вот и все.

Конечно, вы также можете использовать приложение, например Prepros, для компиляции ваших файлов .less .

Если вы регулярно работаете с Less или намерены это сделать, это лучший вариант. Для получения дополнительной информации о Prepros вы можете увидеть это руководство на SitePoint .

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

Уф. Наконец тяжелая работа сделана. Теперь пришло время проверить нашу работу.

В папке проекта создайте новый файл HTML с именем pixie.html и поместите в него следующую разметку:

 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>Pixie</title> <link rel="stylesheet" type="text/css" href="pixie.css"> </head> <body> <p><a href="#"><i></i></a></p> <p><i></i><i></i></p> <p><i></i><i></i><i></i><i></i></p> <p><i></i><i></i><i></i><i></i></p> <p><i></i><i></i>A mirror effect</p> <p><i></i>Life's Good<i></i></p> <p><i></i>Loading. ..</p> </body> </html> 

Когда вы откроете его в браузере, вы должны увидеть следующее:

Изображения не используются; только шрифты, построенные из IcoMoon. Как видите, иконки выглядят и ведут себя довольно хорошо. Итак, поздравляю! Вы только что создали и успешно протестировали новую библиотеку значков CSS.

ПРИМЕЧАНИЕ. Если у вас возникли проблемы с файлом pixie.less или любым другим, вы можете загрузить рабочую версию библиотеки (включая все файлы) здесь .

Резюме

В начале этого урока мы увидели, что одним из преимуществ наличия пользовательской библиотеки является то, что в результате вы получаете гораздо меньшие файлы. Давайте сделаем быстрый эксперимент, чтобы доказать это. Снова откройте приложение IcoMoon и на этот раз выберите все значки из набора значков IcoMoon. Затем загрузите шрифт и снова извлеките папку шрифтов, когда захотите. Теперь проверьте размер этой папки и сравните ее с размером одноименной папки в нашем проекте Pixie. Размер всех значков из набора IcoMoon составляет 507 КБ, тогда как для наших проектов только те значки, которые нам нужны, составляют примерно 19 КБ. В результате мы сэкономили 488 КБ!

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

Скачать исходные файлы

Icon Font Pack | 10 бесплатных инструментов для создания собственного Icon Font Pack

Icon Font Pack —

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

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

Источник изображения: pixabay.com

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

«Так почему бы не использовать вместо этого изображения?» Если это то, что вам интересно, ответ прост: наборы шрифтов Icon очень просты!

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

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

Инструмент для создания собственного пакета шрифтов Icon

Ниже приведены 10 бесплатных инструментов, которые помогут вам создать свой собственный набор шрифтов иконок:

  1. Fontello

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

Просто перетащите файл SVG со своего компьютера и поместите его на панель под заголовком «Пользовательские значки», и все готово!

  1. Icomoon

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

  1. Icon Vault

Icon Vault — это супер плавный сайт и очень простой в использовании! Он предлагает правильно упорядоченные шаблоны значков, разделенные на подзаголовки, такие как Social и iOS. У вас есть возможность создать свой собственный шрифт, загрузив предварительно настроенный шаблон значков. Как только ваша папка zip готова, просто перетащите ее в раздел с надписью «Перетащите сюда файлы для загрузки».

  1. Glyphter

Glyphter — это необычная платформа, которая приветствует вас уникальной сеткой символов, где вы можете перетаскивать SVG-файлы. Справа видна обширная сетка их бесплатных значков, и вы можете выбрать столько их, сколько хотите, и просто перетащить их влево. После того, как вы собрали значки, которые хотите создать в сетке, вы можете выбрать и отредактировать их, используя «Редактор глифов». После того, как вы закончите редактирование, просто нажмите на стрелку загрузки и вуаля! Задача выполнена.

  1. Pictonic Icon Font Pack конструктор

Вот креативное решение ваших проблем веб-дизайна. У Pictonic есть ровно 362 бесплатных значка, после чего с пользователей взимается плата в размере 0, 59 доллара за значок.

Этот сайт нуждается в вашей регистрации, чтобы иметь возможность работать над ним. В нем насчитывается более 2700 икон.

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

Рекомендуемые курсы

  • Сертификационный курс по информационной безопасности
  • Программа Ruby on Rails
  • Онлайн курс по CSS
  • Пакет обучения HTML5 и CSS3
  1. Fontastic

Великолепный причудливый сайт с более чем 9000 значков шрифтов; мы должны сказать больше?

Для доступа к системе создания иконок регистрация в Fontasic обязательна. Таким образом, вы можете выбрать из списка их свободно доступных наборов значков, таких как Octicons, значки Steamline, значки Foundation и т. Д. Вы также можете загрузить свои собственные значки SVG. После этого, после нажатия на вкладку «Опубликовать», у вас будет возможность загрузить создатель шрифта значков или опубликовать его в облаке значков. Лучшая особенность этого веб-сайта заключается в том, что вы можете редактировать, изменять цвет и т. Д. Своих значков в любое время, используя Fontastic.

  1. We Love Icon Font Pack

Как следует из названия, этот веб-сайт позволяет вам выбрать и создать свой собственный создатель шрифтов иконок. Вам предоставляется выбор отличного качества создателя иконок, в том числе Brandicon, Entypo, Font Awesome и многие другие. Вы можете напрямую добавить и использовать набор на свой сайт. Нажмите «Добавить», после чего вы получите встроенный код и сможете использовать CSS для дальнейшей настройки своей коллекции!

  1. Пользовательский шрифт

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

  1. Font Awesome

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

И лучшая часть? Это полностью и совершенно бесплатно для коммерческого использования!

  1. Pictos

Как раз тогда, когда мы подумали, что это не может стать лучше, Pictos с треском пробралась на арену разработки пользовательского интерфейса. Он предлагает отличные варианты в своем навсегда бесплатном пакете. Каждый значок интерфейса в новой и инновационной коллекции Redux имеет три варианта, а именно.

  • Линия: показывает контуры фигур иконок
  • Сплошной: формы значков заполнены сплошной черно-белой цветовой темой.
  • Цвета: все иконки создателя шрифта имеют полностью завершенные цвета.

Эти значки также подразделяются на полезные категории.

Прежде всего, Pitcos гарантирует безупречное качество, поскольку каждая иконка Redux была тщательно обработана и помещена в сетку 24 x 24 для обеспечения максимальной ясности.

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

Рекомендуемые статьи

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

  1. 8 полезных советов — HTML5 против Flash
  2. Должен знать Удивительное введение R Tool для аналитики
  3. 32 полезных инструмента аналитики мобильных приложений, которые каждый должен использовать в отрасли
  4. Удивительное руководство по Android-приложениям для повышения производительности на 2016 год
  5. Удивительные вопросы интервью графического дизайна

Как создать свои собственные шрифты с помощью Inkscape и Icomoon

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

Инструкции в этой статье относятся к Inkscape версии 0.92.4 для Windows, Mac и Linux.

Что нужно для создания пользовательских шрифтов

Inkscape — бесплатная графическая программа с открытым исходным кодом для Windows, Mac и Linux. IcoMoon — это веб-сайт, который позволяет вам загружать собственные  SVG-графики и конвертировать их в шрифты бесплатно. Inkscape необходимо загрузить и установить, пока IcoMoon работает в любом веб-браузере. Ни одна из программ не требует, чтобы вы указали свой адрес электронной почты или другую личную информацию

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

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

Вы также можете нарисовать свои письма прямо в Inkscape. Это может работать особенно хорошо, если вы используете  планшет для рисования .

Mecaleha / Getty Images

Как создать свои собственные шрифты

Чтобы создать пользовательские шрифты с помощью Inkscape и Icomoon:

  1. Откройте Inkscape и выберите « Файл» > « Импорт» .

  2. Выберите ваше изображение и выберите Открыть .

  3. Убедитесь Вставить выбран рядом Image Import Type , затем выберите OK .

  4. Если изображение кажется слишком маленьким или большим в окне, перейдите в « Вид» > « Масштаб»> «Масштаб 1: 1», чтобы настроить вид.

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

  5. Установите флажок рядом с Live Preview, чтобы увидеть, как будет выглядеть конечный продукт. Настройте параметры по своему вкусу или оставьте значения по умолчанию и выберите ОК .

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

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

  7. Перейдите в Path > Break Apart, чтобы разбить буквы на отдельные элементы.

  8. Некоторые отдельные буквы могут быть разбиты на несколько элементов. Чтобы сгруппировать эти элементы вместе, нарисуйте рамку вокруг них с помощью инструмента « Выделение» , затем перейдите в « Объект» > « Группа» . У каждой буквы должен быть свой отдельный элемент, поэтому лучше сделать это для каждого символа.

  9. Перейдите в Файл > Свойства документа .

  10. Установите ширину и высоту до 500 пикселей .

  11. Перетащите все свои письма за края страницы.

  12. Перетащите первую букву на страницу, а затем перетащите маркеры, чтобы изменить размер буквы, чтобы она занимала большую часть страницы.

    Не забудьте удерживать Ctrl или Command, чтобы сохранить исходные пропорции.

  13. Перейдите в Файл > Сохранить как .

  14. Дайте файлу осмысленное имя и выберите Сохранить .

    Обязательно сохраните файл в обычном формате .svg .

  15. Переместите или удалите первую букву, затем поместите вторую букву на страницу и повторяйте процесс, пока каждая буква не будет сохранена как отдельный файл . svg.

  16. Откройте Icomoon в веб-браузере, затем выберите « Импорт значков» .

  17. Выберите первую букву в вашем наборе пользовательских шрифтов и выберите Открыть .

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

  18. Когда вы загрузите каждый символ, он появится на странице. Как только вы загрузите их все, нажмите на каждый из них, чтобы выделить его, и выберите « Создать шрифт» в правом нижнем углу.

    Выберите карандаш в верхней части страницы для дальнейшего редактирования отдельных символов.

  19. Присвойте каждую букву юникод-символу. Щелкните в правой части поля под каждым файлом .svg и введите символ, который вы хотите связать с ним. Icomoon автоматически обнаружит соответствующий шестнадцатеричный код. Когда закончите, выберите Загрузить .

Работа со шрифтом Awesome

Что такое Font 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:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Для подключения с BootstrapCDN:

<link rel="stylesheet" href="https://maxcdn. bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Этот код нужно добавить в раздел <head> желательно выше основного подключения style.css. После того как файл подключили, можно приступать использовать иконки на своем ресурсе.

Способ 2

Переходим на сайт Font Awesome, и скачиваем архив со шрифтом. Распаковав архив мы увидим несколько папок. Для установки шрифта нам понадобятся две папки это css и папка fonts. Закачиваем их на свой сервер где расположен сайт, если есть папки с таким названием, то просто добавляем из них содержимое. Затем подключаем файл font-awesome.css или font-awesome.min.css при помощи тега <link>, только теперь из папки css нашего сайта.

Используем полную версию:

<link rel="stylesheet" href="http://ваш_сайт/css/font-awesome.css">

Используем минимизированную версию:

<link rel="stylesheet" href="http://ваш_сайт/css/font-awesome.min.css">

2.

Как работать с иконками Font Awesome

На веб-страницу иконки можно добавить двумя способами, первый способ это использовать соответствующий класс иконки и указать его для элемента <i></i> или <span></span>, но предварительно нужно прописать класс fa каждому из элементов.

 <i></i>

Второй способ, добавляем иконки при помощи псевдоэлементов ::before и ::after, а так же соответствующего значения свойства content для иконки. Обязательно указываем font-family: FontAwesome иначе шрифты работать не будут.

li:before {
content: "\f07a"; /* добавляем иконку корзина */
font-family: FontAwesome;
color: #aaaaaa;
margin-right: 10px; 
}
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
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
2.2. Как фиксировать ширину иконки

Для фиксирования ширины иконки используется класс fa-fw, задав его, мы фиксируем ширину тем самым можем их использовать как для навигации так и для оформление списков.

<ul>
  <li><a href="#"><i></i> Главная</a></li>
  <li><a href="#"><i></i> Карта</a></li>
  <li><a href="#"><i></i> Кабинет</a></li>
  <li><a href="#"><i></i> Настройки</a></li>
</ul>
2.3. Как маркировать списки LI иконками

Для замены стандартных маркеров в блоке <ul>. ..</ul> используются классы fa-ul и fa-li.

  • элемент списка
  • элемент списка
  • элемент списка
  • элемент списка
<ul>
  <li><i></i>элемент списка</li>
  <li><i></i>элемент списка</li>
  <li><i></i>элемент списка</li>
  <li><i></i>элемент списка</li>
</ul>
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.

<i></i>
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.
<i></i>
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
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
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
<i></i> normal
<i></i> fa-rotate-90
<i></i> fa-rotate-180
<i></i> fa-rotate-270
<i></i> fa-flip-horizontal
<i></i> 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
<span>
  <i></i>
  <i></i>
</span>
fa-twitter на fa-square-o<br>
<span>
  <i></i>
  <i></i>
</span>
fa-flag на fa-circle<br>
<span>
  <i></i>
  <i></i>
</span>
fa-terminal на fa-square<br>
<span>
  <i></i>
  <i></i>
</span>
fa-ban на fa-camera
2.8. Примеры использование иконок в Bootstrap 3

Иконки Awesome прекрасно работают в Bootstrap и это хорошо видно из данных примеров.

<a href="#">
  <i></i> Удалить</a>
<a href="#">
  <i></i> Настройки</a>

<a href="#">
  <i></i> Font Awesome<br>Версия 4.7.0</a>

<div>
  <a href="#">
    <i title="Align Left"></i>
  </a>
  <a href="#">
    <i title="Align Center"></i>
  </a>
  <a href="#">
    <i title="Align Right"></i>
  </a>
  <a href="#">
    <i title="Align Justify"></i>
  </a>
</div>

<div>
  <span><i></i></span>
  <input type="text" placeholder="Ваш Email">
</div>
<div>
  <span><i></i></span>
  <input type="password" placeholder="Пароль">
</div>

<div>
  <a href="#"><i></i> Пользователь</a>
  <a data-toggle="dropdown" href="#">
    <span title="Toggle dropdown menu"></span>
  </a>
  <ul>
    <li><a href="#"><i></i> Редактировать</a></li>
    <li><a href="#"><i></i> Удалить</a></li>
    <li><a href="#"><i></i> Забанить</a></li>
    <li></li>
    <li><a href="#"><i></i> Дать права администратора</a></li>
  </ul>
</div>

3.

Группы иконок

В версии Font Awesome 4.7 включены новые 41 иконка. Иконки разбиты на группы для удобного отбора при помощи поиска или по навигации. У каждой иконки представлен класс и CSS код для вставки при помощи свойства content.

3.1. Иконки для веб-приложений

fa-bath\f2cd

fa-id-card\f2c2

fa-id-card-o\f2c3

fa-envelope-open\f2b6

fa-envelope-open-o\f2b7

fa-id-badge\f2c1

fa-microchip\f2db

fa-podcast\f2ce

fa-shower\f2cc

fa-snowflake-o\f2dc

fa-thermometer-full\f2c7

fa-thermometer-empty\f2cb

fa-thermometer-quarter\f2ca

fa-thermometer-half\f2c9

fa-thermometer-three-quarters\f2c8

fa-thermometer-full\f2c7

fa-user-circle\f2bd

fa-user-circle-o\f2be

fa-user-o\f2c0

fa-window-close\f2d3

fa-window-close-o\f2d4

fa-window-maximize\f2d0

fa-window-restore\f2d2

fa-window-minimize\f2d

fa-address-book\f2b9

fa-address-book-o\f2ba

fa-address-card\f2bb

fa-address-card-o\f2bc

fa-adjust\f042

fa-anchor\f13d

fa-archive\f187

fa-arrows\f047

fa-asterisk\f069

fa-at\f1fa

fa-balance-scale\f24e

fa-ban\f05e

fa-bank\f19c

fa-barcode\f02a

fa-battery-empty\f244

fa-battery-half\f242

fa-battery-quarter\f243

fa-battery-three-quarters\f241

fa-battery-full\f240

fa-bed\f236

fa-beer\f0fc

fa-bell\f0f3

fa-bell-o\f0a2

fa-bell-slash\f1f6

fa-bell-slash-o\f1f7

fa-binoculars\f1e5

fa-birthday-cake\f1fd

fa-bolt\f0e7

fa-bomb\f1e2

fa-book\f02d

fa-bookmark\f02e

fa-bookmark-o\f097

fa-briefcase\f0b1

fa-bug\f188

fa-building\f1ad

fa-building-o\f0f7

fa-bullhorn\f0a1

fa-bullseye\f140

fa-calculator\f1ec

fa-calendar\f073

fa-calendar-check-o\f274

fa-calendar-minus-o\f272

fa-calendar-o\f133

fa-calendar-plus-o\f271

fa-calendar-times-o\f273

fa-cart-plus\f217

fa-cc\f20a

fa-certificate\f0a3

fa-clock-o\f017

fa-clone \f24d

fa-close\f00d

fa-cloud\f0c2

fa-cloud-download\f0ed

fa-cloud-upload\f0ee

fa-code\f121

fa-code-fork\f126

fa-coffee\f0f4

fa-comment\f075

fa-comment-o\f0e5

fa-commenting\f27a

fa-commenting-o\f27b

fa-comments\f086

fa-comments-o\f0e6

fa-compass\f14e

fa-copyright\f1f9

fa-creative-commons\f25e

fa-crop\f125

fa-crosshairs\f05b

fa-cube\f1b2

fa-cubes\f1b3

fa-cutlery\f0f5

fa-dashboard\f0e4

fa-database\f1c0

fa-desktop\f108

fa-diamond\f219

fa-download\f019

fa-edit\f044

fa-ellipsis-h\f141

fa-ellipsis-v\f142

fa-envelope\f0e0

fa-envelope-o\f003

fa-envelope-square\f199

fa-exclamation\f12a

fa-exclamation-circle\f06a

fa-exclamation-triangle\f071

fa-external-link\f08e

fa-external-link-square\f14c

fa-eye\f06e

fa-eye-slash\f070

fa-eyedropper\f1fb

fa-fax\f1ac

fa-film\f008

fa-filter\f0b0

fa-fire\f06d

fa-fire-extinguisher\f134

fa-flag\f024

fa-flag-checkered\f11e

fa-flag-o\f11d

fa-flash\f0e7

fa-flask\f0c3

fa-frown-o\f119

fa-futbol-o\f1e3

fa-gear\f013

fa-gears\f085

fa-gift\f06b

fa-glass\f000

fa-globe\f0ac

fa-graduation-cap\f19d

fa-group\f0c0

fa-hashtag\f292

fa-heart\f004

fa-heart-o\f08a

fa-heartbeat\f21e

fa-h-square\f0fd

fa-history\f1da

fa-home\f015

fa-hospital-o\f0f8

fa-hourglass\f254

fa-hourglass-start\f251

fa-hourglass-half\f252

fa-hourglass-end\f253

fa-hourglass-o\f250

fa-i-cursor\f246

fa-inbox\f01c

fa-industry\f275

fa-info\f129

fa-info-circle\f05a

fa-key\f084

fa-language\f1ab

fa-leaf\f06c

fa-legal\f0e3

fa-lemon-o\f094

fa-lightbulb-o\f0eb

fa-location-arrow\f124

fa-lock\f023

fa-magic\f0d0

fa-magnet\f076

fa-map\f279

fa-map-marker\f041

fa-map-o\f278

fa-map-pin\f276

fa-map-signs\f277

fa-medkit\f0fa

fa-meh-o\f11a

fa-microphone\f130

fa-microphone-slash\f131

fa-moon-o\f186

fa-mouse-pointer\f245

fa-music\f001

fa-navicon\f0c9

fa-newspaper-o\f1ea

fa-object-group\f247

fa-object-ungroup\f248

fa-paint-brush\f1fc

fa-paper-plane\f1d8

fa-paper-plane-o\f1d9

fa-paw\f1b0

fa-pencil\f040

fa-pencil-square\f14b

fa-pencil-square-o\f044

fa-percent\f295

fa-phone\f095

fa-phone-square\f098

fa-plug\f1e6

fa-power-off\xf011

fa-print\f02f

fa-puzzle-piece\f12e

fa-qrcode\f029

fa-question\f128

fa-question-circle\f059

fa-quote-left\f10d

fa-quote-right\f10e

fa-recycle\f1b8

fa-refresh\f021

fa-registered\f25d

fa-reply\f112

fa-reply-all\f122

fa-retweet\f079

fa-road\f018

fa-rss\f09e

fa-rss-square\f143

fa-search\f002

fa-search-minus\f010

fa-search-plus\f00e

fa-send\f1d8

fa-send-o\f1d9

fa-server\f233

fa-share\f064

fa-share-square\f14d

fa-share-square-o\f045

fa-shield\f132

fa-shopping-bag\f290

fa-shopping-basket\f291

fa-shopping-cart\f07a

fa-sign-in\f090

fa-sign-out\f08b

fa-signal\f012

fa-sitemap\f0e8

fa-sliders\xf1de

fa-smile-o\xf118

fa-soccer-ball-o\f1e3

fa-sort\f0dc

fa-sort-alpha-asc\f15d

fa-sort-alpha-desc\f15e

fa-sort-amount-asc\f160

fa-sort-amount-desc\f161

fa-sort-asc\f0de

fa-sort-desc\f0dd

fa-sort-numeric-asc\f162

fa-sort-numeric-desc\f163

fa-spoon\f1b1

fa-star\f005

fa-star-half\f089

fa-star-half-o\f123

fa-star-o\f006

fa-street-view\f21d

fa-suitcase\f0f2

fa-sun-o\f185

fa-support\f1cd

fa-tachometer\f0e4

fa-tag\f02b

fa-tags\f02c

fa-tasks\f0ae

fa-terminal\f120

fa-thumb-tack\f08d

fa-ticket\f145

fa-tint\f043

fa-trademark\f25c

fa-trash\f1f8

fa-trash-o\f014

fa-tree\f1bb

fa-trophy\f091

fa-tty\f1e4

fa-umbrella\f0e9

fa-unlock\f09c

fa-unlock-alt\f13e

fa-unsorted\f0dc

fa-upload\f093

fa-user\f007

fa-user-plus\xf234

fa-user-secret\f21b

fa-user-times\f235

fa-user-md\f0f0

fa-volume-down\f027

fa-volume-off\f026

fa-volume-up\f028

fa-warning\f071

fa-wifi\f1eb

fa-wrench\f0ad

3.
2. Иконки для людей с ограниченными возможностями

fa-american-sign-language-interpreting\f2a3

fa-assistive-listening-systems\f2a2

fa-audio-description\f29e

fa-blind\f29d

fa-braille\f2a1

fa-deaf\f2a4

fa-low-vision\f2a8

fa-question-circle-o\f29c

fa-sign-language\f2a7

fa-tty\f1e4

fa-universal-access\f29a

fa-volume-control-phone\f2a0

fa-wheelchair\f193

fa-wheelchair-alt\f29b

3.3. Иконки рука

fa-hand-grab-o\f255

fa-hand-lizard-o\f258

fa-hand-paper-o\f256

fa-hand-peace-o\f25b

fa-hand-pointer-o\f25a

fa-hand-scissors-o\f257

fa-hand-spock-o\xf259

fa-hand-o-down\f0a7

fa-hand-o-left\f0a5

fa-hand-o-right\f0a4

fa-hand-o-up\f0a6

fa-thumbs-down\f165

fa-thumbs-o-down\f088

fa-thumbs-o-up\f087

fa-thumbs-up\f164

fa-handshake-o\f2b5

3.
4. Иконки для форм

fa-check-square\f14a

fa-check-square-o\f046

fa-circle\f111

fa-circle-o\f10c

fa-dot-circle-o\f192

fa-minus-square\f146

fa-minus-square-o\f147

fa-plus-square\f0fe

fa-plus-square-o\f196

fa-square\f0c8

fa-square-o\f096

3.5. Иконки для гаджетов

fa-mobile\f10b

fa-tablet\f10a

fa-television\f26c

fa-video-camera\f03d

fa-camera\f030

fa-camera-retro\f083

fa-hdd-o\f0a0

fa-headphones\f025

fa-laptop\f109

fa-gamepad\f11b

fa-keyboard-o\f11c

3.6. Иконки транспорт

fa-ambulance\f0f9

fa-bicycle\f206

fa-bus\f207

fa-car\f1b9

fa-fighter-jet\f0fb

fa-motorcycle\f21c

fa-plane\f072

fa-rocket\f135

fa-ship\f21a

fa-space-shuttle\f197

fa-subway\f239

fa-taxi\f1ba

fa-train\f238

fa-truck\f0d1

fa-wheelchair\f193

fa-wheelchair-alt\f29b

3.
7. Гендерные иконки

fa-child\f1ae

fa-female\f182

fa-male\f183

fa-genderless\f1db

fa-transgender\f224

fa-transgender-alt\f225

fa-mars\f222

fa-mars-double\f227

fa-mars-stroke\f229

fa-mars-stroke-h\f22b

fa-mars-stroke-v\f22a

fa-mercury\f223

fa-neuter\f22c

fa-venus\f221

fa-venus-double\f226

fa-venus-mars\f228

3.8. Файловые иконки

fa-folder\f07b

fa-folder-o\f114

fa-folder-open\f07c

fa-folder-open-o\f115

fa-file\f15b

fa-file-o\f016

fa-file-archive-o\f1c6

fa-file-audio-o\f1c7

fa-file-code-o\f1c9

fa-file-excel-o\f1c3

fa-file-image-o\f1c5

fa-file-movie-o\f1c8

fa-file-pdf-o\f1c1

fa-file-photo-o\xf1c5

fa-file-powerpoint-o\f1c4

fa-file-sound-o\f1c7

fa-file-video-o\f1c8

fa-file-word-o\f1c2

fa-file-zip-o\f1c6

fa-file-text\f15c

fa-file-text-o\f0f6

fa-files-o\f0c5

fa-image\f03e

fa-sticky-note\f249

fa-sticky-note-o\f24a

3.
9. Иконки валют

fa-btc\f15a

fa-usd\f155

fa-euro\f153

fa-gbp\f154

fa-yen\f157

fa-money\f0d6

fa-ruble\f158

fa-rupee\f156

fa-shekel\f20b

fa-turkish-lira\f195

fa-won\f159

fa-gg\f260

3.10. Иконки управляющих символов

fa-check\f00c

fa-check-circle\f058

fa-check-circle-o\f05d

fa-circle-thin\f1db

fa-check-square\f14a

fa-check-square-o\f046

fa-circle\f111

fa-circle-o\f10c

fa-dot-circle-o\f192

fa-minus-square\f146

fa-minus-square-o\f147

fa-plus-square\f0fe

fa-plus-square-o\f196

fa-minus\f068

fa-minus-circle\f056

fa-square\f0c8

fa-square-o\f096

fa-plus\f067

fa-plus-circle\f055

fa-times-circle\f057

fa-times-circle-o\f05c

3.
11. Иконки платежных систем

fa-cc-amex\f1f3

fa-cc-diners-club\f24c

fa-cc-discover\f1f2

fa-cc-jcb\f24b

fa-cc-mastercard\f1f1

fa-cc-paypal\f1f4

fa-cc-stripe\f1f5

fa-cc-visa\f1f0

fa-credit-card\f09d

fa-credit-card-alt\f283

fa-google-wallet\f1ee

fa-paypal\f1ed

3.12. Иконки социальных сетей и сообществ

fa-codepen\f1cb

fa-telegram\f2c6

fa-behance\f1b4

fa-behance-square\f1b5

fa-deviantart\f1bd

fa-whatsapp\f232

fa-digg\f1a6

fa-dribbble\f17d

fa-facebook\f09a

fa-facebook-official\f230

fa-facebook-square\f082

fa-google-plus\f0d5

fa-google-plus-square\f0d4

fa-jsfiddle\f1cc

fa-flickr\f16e

fa-instagram\f16d

fa-github\f09b

fa-github-alt\f113

fa-github-square\f092

fa-linkedin\f0e1

fa-linkedin-square\f08c

fa-odnoklassniki\f263

fa-odnoklassniki-square\f264

fa-pinterest\f0d2

fa-pinterest-p\f231

fa-pinterest-square\f0d3

fa-stack-overflow\f16c

fa-yelp\f1e9

fa-tumblr\f173

fa-tumblr-square\f174

fa-twitter\f099

fa-twitter-square\f081

fa-vk\f189

fa-youtube-square\f166

fa-youtube\f167

3.
13. Иконки редактирования текста

fa-align-center\f037

fa-align-justify\f039

fa-align-left\f036

fa-align-right\f038

fa-bold\f032

fa-chain\f0c1

fa-chain-broken\f127

fa-clipboard\f0ea

fa-columns\f0db

fa-copy\f0c5

fa-cut\f0c4

fa-dedent\f03b

fa-eraser\f12d

fa-floppy-o\f0c7

fa-font\f031

fa-header\f1dc

fa-indent\f03c

fa-italic\f033

fa-list\f03a

fa-list-alt\f022

fa-list-ol\f0cb

fa-list-ul\f0ca

fa-outdent\f03b

fa-paperclip\f0c6

fa-paragraph\f1dd

fa-paste\f0ea

fa-repeat\f01e

fa-rotate-left\f0e2

fa-rotate-right\f01e

fa-save\f0c7

fa-strikethrough\f0cc

fa-subscript\f12c

fa-superscript\f12b

fa-table\f0ce

fa-text-height\f034

fa-text-width\f035

fa-th\f00a

fa-th-large\f009

fa-th-list\f00b

fa-underline\f0cd

3.
14. Иконки направления

fa-level-down\f149

fa-level-up\f148

fa-angle-double-down\f103

fa-angle-double-left\f100

fa-angle-double-right\f101

fa-angle-double-up\f102

fa-angle-down\f107

fa-angle-left\f104

fa-angle-right\f105

fa-angle-up\f106

fa-arrow-circle-down\f0ab

fa-arrow-circle-left\f0a8

fa-arrow-circle-right\f0a9

fa-arrow-circle-up\f0aa

fa-arrow-circle-o-down\f01a

fa-arrow-circle-o-left\f190

fa-arrow-circle-o-right\f18e

fa-arrow-circle-o-up\f01b

fa-arrow-down\f063

fa-arrow-left\f060

fa-arrow-right\f061

fa-arrow-up\f062

fa-arrows-h\f07e

fa-arrows-v\f07d

fa-caret-down\f0d7

fa-caret-left\f0d9

fa-caret-right\f0da

fa-caret-up\f0d8

fa-caret-square-o-down\f150

fa-caret-square-o-left\f191

fa-caret-square-o-right\f152

fa-caret-square-o-up\f151

fa-cart-arrow-down\f218

fa-chevron-circle-down\f13a

fa-chevron-circle-left\f137

fa-chevron-circle-right\f138

fa-chevron-circle-up\f139

fa-chevron-down\f078

fa-chevron-left\f053

fa-chevron-right\f054

fa-chevron-up\f077

fa-exchange\f0ec

fa-long-arrow-down\f175

fa-long-arrow-left\f177

fa-long-arrow-right\f178

fa-long-arrow-up\f176

fa-toggle-down\f150

fa-toggle-left\f191

fa-toggle-right\f152

fa-toggle-up\f151

fa-toggle-off\f204

fa-toggle-on\f205

3.
15. Иконки видео плеера

fa-arrows-alt\f0b2

fa-backward\f04a

fa-forward\f04e

fa-compress\f066

fa-eject\f052

fa-expand\f065

fa-fast-backward\f049

fa-fast-forward\f050

fa-pause\f04c

fa-pause-circle\f28b

fa-pause-circle-o\f28c

fa-play\f04b

fa-play-circle\f144

fa-play-circle-o\f01d

fa-random\f074

fa-step-backward\f048

fa-step-forward\f051

fa-stop\f04d

fa-stop-circle\f28d

fa-stop-circle-o\f28e

fa-youtube-play\f16a

3.16. Брендовые иконки

fa-bandcamp\f2d5

fa-eercast\f2da

fa-etsy\f2d7

fa-free-code-camp\f2c5

fa-grav\f2d6

fa-imdb\f2d8

fa-linode\f2b8

fa-meetup\f2e0

fa-quora\f2c4

fa-ravelry\f2d9

fa-superpowers\f2dd

fa-wpexplorer\f2de

fa-500px\f26e

fa-adn\f170

fa-amazon\f270

fa-android\f17b

fa-angellist\f209

fa-apple\f179

fa-bitbucket\f171

fa-bitbucket-square\f172

fa-black-tie\f27e

fa-bluetooth\f293

fa-bluetooth-b\f294

fa-buysellads\f20d

fa-chrome\f268

fa-css3\f13c

fa-connectdevelop\f20e

fa-dashcube\f210

fa-delicious\f1a5

fa-dropbox\f16b

fa-drupal\f1a9

fa-edge\f282

fa-empire\f1d1

fa-expeditedssl\f23e

fa-firefox\f269

fa-fonticons\f280

fa-fort-awesome\f286

fa-forumbee\f211

fa-foursquare\f180

fa-ge\f1d1

fa-get-pocket\f265

fa-git\f1d3

fa-git-square\f1d2

fa-gg\f260

fa-gg-circle\f261

fa-google\f1a0

fa-gratipay\f184

fa-hacker-news\f1d4

fa-houzz\f27c

fa-html5\f13b

fa-ioxhost\f208

fa-joomla\f1aa

fa-lastfm\f202

fa-lastfm-square\f203

fa-leanpub\f212

fa-linux\f17c

fa-maxcdn\f136

fa-meanpath\f20c

fa-medium\f23a

fa-mixcloud\f289

fa-modx\f285

fa-opencart\f23d

fa-openid\f19b

fa-opera\f26a

fa-optin-monster\f23c

fa-pagelines\f18c

fa-pied-piper\f1a7

fa-pied-piper-alt\f1a8

fa-product-hunt\f288

fa-qq\f1d6

fa-rebel\f1d0

fa-reddit\f1a1

fa-reddit-square\f1a2

fa-renren\f18b

fa-safari\f267

fa-scribd\f28a

fa-sellsy\f213

fa-share-alt\f1e0

fa-share-alt-square\f1e1

fa-shirtsinbulk\f214

fa-simplybuilt\f215

fa-skyatlas\f216

fa-skype\f17e

fa-slack\f198

fa-slideshare\f1e7

fa-soundcloud\f1be

fa-spotify\f1bc

fa-stack-exchange\f18d

fa-steam\f1b6

fa-steam-square\f1b7

fa-stethoscope\f0f1

fa-stumbleupon\f1a4

fa-stumbleupon-circle\f1a3

fa-tencent-weibo\f1d5

fa-trello\f181

fa-tripadvisor\f262

fa-usb\f287

fa-viacoin\f237

fa-vimeo\f27d

fa-vimeo-square\f194

fa-vine\f1ca

fa-wechat\f1d7

fa-weibo\f18a

fa-wikipedia-w\f266

fa-windows\f17a

fa-wordpress \f19a

fa-xing\f168

fa-xing-square\f169

fa-y-combinator\f23b

fa-yahoo\f19e

3.
17. Иконки диаграмм

fa-area-chart\f1fe

fa-bar-chart\f080

fa-line-chart\f201

fa-pie-chart\f200

3.18. Вращающиеся иконки

fa-circle-o-notch\f1ce

fa-spinner\f110

fa-gear\f013

fa-spinner\f110

fa-refresh\f021

4. Похожие ресурсы

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

4.1. IcoMoon

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

4.2. Material icons

Material icons — сервис представляет плоские иконки от Google. Иконки красиво отображаются на всех платформах и работают на любых разрешений экрана.

Коллекция содержит в себе более 750 иконок и легко внедряется на сайт при помощи тега link, для отображения иконок в браузере используется иконочный шрифт Material Icons.

Сами иконки добавляются при помощи i с классом material-icons или при помощи html кода иконки.

4.3. Fontello

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

4.4. Foundation Icon

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

1 предыдущая статья

Установка и удаление шрифтов на компьютере Mac

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

Установка шрифтов

Дважды щелкните нужный шрифт в Finder, затем щелкните «Установить шрифт» в открывшемся окне предварительного просмотра шрифта. После тогда как компьютер Mac проверит шрифт и откроет программу Шрифты, шрифт установлен и доступен для использования.

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

Шрифты, отображаемые в программе «Шрифты» затененными, либо отключены («Откл.»), либо доступны для загрузки с веб-сайта Apple как дополнительные. Чтобы загрузить шрифт, выделите его и выберите «Правка» > «Загрузить».

Отключение шрифтов

Отключить можно любой шрифт, не являющийся обязательным для компьютера Mac. Выделите шрифт в программе «Шрифты», затем выберите «Правка» > «Отключить». Шрифт останется установленным, но больше не будет отображаться в меню шрифтов программ. В программе «Шрифты» рядом с названиями отключенных шрифтов отображается пометка «Откл.».

Удаление шрифтов

Удалить можно любой шрифт, не являющийся обязательным для компьютера Mac. Выделите шрифт в программе «Шрифты», затем выберите «Файл» > «Удалить». Программа «Шрифты» переместит шрифт в корзину.

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

ОС macOS поддерживает шрифты TrueType (.ttf), Variable TrueType (.ttf), TrueType Collection (.ttc), OpenType (.otf) и OpenType Collection (. ttc). В ОС macOS Mojave добавлена поддержка шрифтов OpenType-SVG.

Шрифты устаревшего комплекта TrueType и шрифты PostScript Type 1 LWFN могут работать, но использовать их не рекомендуется.

Дата публикации: 

❍ Иконка Шрифт

Создавать собственные шрифты

Используя приложение IcoMoon, вы можете создавать свои собственные шрифты, которые содержат только те значки, которые вам нужны.

Результаты Pixel Perfect

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

Бесплатные иконки, бесплатное приложение

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

Удивительный инструмент для иконографии

Приложение IcoMoon — это усовершенствованный инструмент для создания иконок.Он позволяет сортировать значки, управлять коллекциями значков или делать значки доступными для поиска, добавляя к ним теги. Помимо шрифтов, вы можете создавать значки в форматах PNG, SVG, полимерных значках, PDF, спрайтах CSH, XAML и CSS любого размера и цвета.

Импортируйте собственные векторы

В приложении IcoMoon вы можете импортировать собственные векторы (изображения SVG или шрифты SVG). Импорт иконок происходит локально в вашем браузере. Ваши векторы не будут загружены на наши серверы, когда вы их импортируете.Также доступны некоторые основные параметры редактирования, такие как перемещение, зеркальное отображение и поворот.

Работает в автономном режиме

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

Множественные лигатуры на символ

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

❍ Приложение IcoMoon — генератор шрифтов иконок

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

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

Библиотека

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

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

Используя вкладку SVG & More в приложении IcoMoon, вы можете экспортировать свои значки в SVG, Polymer, PDF, XAML, CSH, PNG и другие форматы. IcoMoon генерирует встроенные SVG-файлы, которые можно использовать с тегом . Узнать больше…

С помощью этого приложения вы можете импортировать собственные векторы (SVG).Импорт происходит локально в вашем собственном браузере. Также доступны некоторые основные параметры редактирования, такие как перемещение, зеркальное отображение и поворот.

Приложение IcoMoon можно использовать бесплатно. Файлы кода (HTML, CSS, JS), созданные IcoMoon, лицензированы MIT. Лицензия для каждого пакета значков указана на вкладке библиотеки приложения.

Вы можете запускать приложение IcoMoon для Chrome в автономном режиме! Вы можете думать об этом как об огромной коллекции бесплатных векторных иконок, к которым вы можете получить доступ, даже когда вы не в сети!

Использование IcoMoon для преобразования иконок SVG в иконочные шрифты

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

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

  1. Перейдите на https://icomoon.io/app/#/select .
  2. После загрузки страницы нажмите « Импорт значков» вверху слева:

3.Мы импортируем 4 файла: UpArrow-01.svg , RightArrow-01.svg , DownArrow-01.svg и BreadCrubmsArroe-01.svg . Выберите их и нажмите « Открыть »:

4. Новые добавленные значки SVG появятся в разделе « Untitled Set ».

5. Выберите значки, которые вы хотите преобразовать, щелкнув по ним. Теперь они будут отмечены оранжевой рамкой. Нажмите « Создать шрифт »:

6.На новой странице будут показаны детали выбранных вами значков. Все, что вам нужно сделать, это загрузить их. Нажмите « Скачать » в правом нижнем углу:

7. Будет загружен файл icomoon.zip.

8. Разархивируйте его, чтобы получить следующие файлы:

  • icomoon / fonts: Каталог, содержащий все сгенерированные файлы.
  • icomoon / demo-files: Каталог Хранит файлы, необходимые для « demo.html ».
  • icomoon / demo.html: HTML-файл, который может быть использован на более позднем этапе. При необходимости вы можете направить его. demo.html и demo-файлы на данный момент не особо важны.
  • icomoon / Read Me.txt: Набор инструкций.
  • icomoon / selection.json: Файл json, в котором хранятся сведения о вашей конфигурации. Этот файл можно использовать для обновления шрифта на IcoMoon, когда захотите.
  • icomoon / style.css: Это файл, который потребуется вашему CSS для включения вновь созданных шрифтов значков.

9. Скопируйте и сохраните папку fonts в папку своей темы.

10. Скопируйте и сохраните файл style.css в файл css вашей темы.

11. Теперь мы можем использовать шрифты иконок в нашем проекте. Здесь мы используем font-family и css content атрибуты, чтобы показать значок SVG DownArrow-01, который был добавлен нами:

Настройте шрифт иконок с помощью IcoMoon | by Rui Soares

Как вы вставляете значки на свой сайт? Вы храните файлы изображений как активы? Вы используете иконочный шрифт, такой как Font Awesome или Ionicons?

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

Второй вариант оставляет вам раздутый шрифт, заполненный ненужными значками. Font Awesome — одна из самых известных библиотек иконок, насчитывающая более 700 иконок; из них сколько вы на самом деле используете? А что, если по какой-то причине ваша команда дизайнеров выберет другой значок facebook? Теперь вам нужно либо добавить новый значок в качестве актива, либо добавить новую библиотеку значков.

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

IcoMoon — это инструмент в виде веб-приложения, позволяющий создавать собственный шрифт значков. В нем есть значки из разных источников, и вы даже можете добавить свои собственные svgs. У IcoMoon также есть собственный пакет значков с более чем 1600 значками на выбор.

Итак, вы можете подумать: «Какого черта мне это использовать?». Что ж, давайте начнем с сайта icomoon.io и нажмите IcoMoon App в правом верхнем углу.

Давайте начнем с добавления значка Facebook в наш проект. Напишите «facebook» в строке поиска.

После выбора этих двух значков в Font Awesome (мы можем выбрать, какой из них мы хотим позже) просто нажмите кнопку «плюс» справа от строки поиска.

Закрыв поиск (крестик справа от строки поиска), мы видим значки, которые мы уже добавили. Давайте добавим стрелки назад и вперед, просто введите «стрелку» в строку поиска и выберите их из результатов.

Я выбрал эти два из набора IcoMoon — Free.Как я уже говорил ранее, с помощью приложения IcoMoon вы можете выбрать нужные значки, но вы также можете импортировать и добавлять свои собственные значки в виде SVG к выбранному. Для этого нажмите кнопку Import Icons вверху страницы и выберите файл. В этом примере я добавил альтернативный значок Twitter.

Теперь, чтобы сгенерировать наш шрифт, мы просто выбираем значки и нажимаем кнопку Generate Font внизу страницы.

На этой странице вы можете изменить названия и коды выбранных значков.

После изменения имен и кодов по своему вкусу нажмите на шестеренку рядом с кнопкой загрузки. В этом всплывающем окне вы можете дать имя своему шрифту, выбрать префикс класса и многие другие параметры, которые вы можете изучить. Если в проекте вы используете sass, stylus или меньше, проверьте Generate Sass, Less или Stylus variables и выберите тот, который вам нужен.

После выбора желаемых опций вы можете закрыть всплывающее окно опций и, наконец, нажать кнопку «Загрузить». Вы получите zip-архив, внутри которого вы найдете следующие файлы:

  • demo-files и demo.html — это просто примеры используемых значков.
  • шрифты. содержит файлы шрифтов, которые необходимо скопировать в папку шрифтов вашего проекта.
  • selection. json содержит выбранные вами значки, которые можно импортировать в приложение IcoMoon.
  • style.css содержит стиль, который необходимо скопировать в свой проект.

Файл стиля содержит начертание шрифта для импорта шрифта, стиль по умолчанию для нашего класса значков и содержимое для каждого отдельного значка.Как только вы добавите этот код в свой проект, вам просто нужно создать элемент (обычно ) и добавить . icon-facebook к его классам, и у вас будет значок Facebook.

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

Чтобы импортировать файл selection.json , перейдите на страницу Manage Projects , выбрав вариант с тем же именем в гамбургер-меню в верхнем левом углу. На новой странице щелкните Import Project и выберите файл selection.json .

IcoMoon: решение проблем со шрифтами иконок

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

  • В выбранной вами библиотеке шрифтов нет нужного значка
  • У вас есть SVG, который вы хотите использовать, но бог знает, как превратить его в шрифт
  • Нет возможности искать шрифт по тексту

Как и многие люди, я по умолчанию использую FontAwesome. Чтобы найти нужный мне значок, нужно поискать в Google «шпаргалку» и мучительно просмотреть список, возвращенный в качестве первого результата.При создании приложений для iOS я просто копирую нужный мне значок прямо из шпаргалки и вставляю его либо в свой исходный код, либо в конструктор интерфейса. С другими библиотеками шрифтов вам часто приходится вычислять значение Unicode. Иногда даже это сложно.

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

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

Почти все шрифты, которые вам могут понадобиться, есть и помечены; Octicons, Iconic, FontAwesome, Material Icons и множество наборов иконок, о которых я раньше не слышал. Я заметил, что EvilIcons не хватает, и мне это нравится. Тем не менее, в наборе IcoMoon Free есть тонны оригинальных иконок, которые компенсируют это, и премиум-иконки выглядят очень заманчиво.

Когда вы выбрали нужные значки, вы можете либо просмотреть их как SVG для загрузки, либо сгенерировать шрифт. Создание шрифта дает вам все, что вам может понадобиться, включая некоторый CSS, значение Unicode и символ для копирования + вставки.

Я буквально очень впечатлен этим инструментом. Более того, для веб-приложений доступные по разумной цене версии премиум-класса обеспечивают хостинг и распространение контента по тем же принципам, что и Adobe TypeKit: управляйте значками, которые нужны вашему приложению, через icomoon.io, и они позаботятся об обновлении удаленных файлов CSS и шрифтов для вас в своей сети распространения контента.

Безусловно, моя любимая функция этого инструмента — это большая кнопка Import Icons , которая позволяет вам импортировать любой SVG- или SVG-шрифт для добавления в вашу библиотеку.

Думаю, многие это оценят.

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

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

IcoMoon был создан и поддерживается Keyamoon, веб-разработчиком и дизайнером.Хорошо сделано!

Начало работы с Icomoon | Acquia Cohesion Docs

Icomoon — это библиотека значков шрифтов, которую можно использовать с Acquia Cohesion. В этом руководстве содержится информация о том, как правильно подготовить библиотеку шрифтов Icomoon для добавления в Acquia Cohesion. Найдите дополнительную информацию о настройке библиотек шрифтов значков.

Для получения более подробной информации о Icomoon, пожалуйста, обратитесь к официальной документации Icomoon.

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

Подготовка библиотек шрифтов значков Icomoon для Acquia Cohesion

Чтобы начать работу с библиотекой шрифтов значков:

Шаг 1. Создайте учетную запись Icomoon

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

Шаг 2. Создайте новый проект

  1. Запустите приложение Icomoon, нажав кнопку Icomoon App на главной странице
  2. Перейдите к экрану «Проекты», щелкнув меню и выбрав Управление проектами . Кроме того, вы можете перейти по URL-адресу проекта напрямую, войдя в систему.

Шаг 3. Настройте библиотеку шрифтов значков

  1. На экране проекта щелкните Загрузить справа от проекта
  2. Щелкните Добавить значки из библиотеки шрифтов и выберите нужную библиотеку
  3. Выберите значки в наборе, который вы хотите включить в библиотеку шрифтов
  4. Щелкните Создать шрифт внизу страницы.

Есть много разных вариантов, как платных, так и бесплатных. В этом примере был выбран набор Icomoon — Free .

Вы также можете импортировать пользовательские значки в свою библиотеку. Это должны быть файлы .svg. Чтобы импортировать значки, нажмите кнопку Импортировать значки и выберите их на локальном диске.

Шаг 4. Загрузите шрифт значка и файлы JSON

Чтобы загрузить файл JSON и файлы шрифтов значков:

  1. Перейти к экрану «Проекты»
  2. Нажмите Загрузить справа от проекта
  3. Нажмите Создать шрифт в правом нижнем углу экрана
  4. Нажмите Скачать в правом нижнем углу экрана
  5. Это предоставит вам файл. zip файл

Шаг 5. Распакуйте и извлеките значок шрифта и файлы JSON

После загрузки файла .zip из Icomoon

  1. Распакуйте файл, чтобы извлечь шрифтов и JSON (показано ниже)
  2. Создайте новый файл .zip только для папки Fonts. Это то, что вы загрузите в Acquia Cohesion
  3. .
  4. Файл selection.json — это JSON, который вы загрузите в Acquia Cohesion.

Настройка библиотек шрифтов значков

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

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

Должен ли я загружать или импортировать шрифты Icon?

При добавлении шрифтов значков в настройки вашего веб-сайта у вас есть выбор «Загрузить» или «Импортировать» шрифты значков.Если вы загрузите свои графические шрифты, они будут размещены на вашем веб-сервере вместе со страницами и файлами вашего веб-сайта. Если вы импортируете шрифты Icon, они будут размещены на Icomoon или другом хосте.

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

Файлы шрифтов значков и требования к формату файлов

При добавлении значков шрифтов вам потребуются два элемента:

  1. Файл . zip, содержащий ваш значок шрифта в форматах EOT, SVG, TTF, WOFF, WOFF2
  2. Файл JSON, содержащий указатель значков в шрифте значков. Это требуется средству выбора значков для отображения значков.

Поддерживаемые генераторы шрифтов значков и форматы JSON

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

Acquia Cohesion поддерживает формат JSON, предоставленный Icomoon и Fontello.Если вы хотите использовать шрифт значка, созданный чем-то другим, вы должны создать свой файл JSON в этом формате.

Варианты размещения шрифтов значков

У вас есть два варианта использования графических шрифтов.

  1. Загрузить на веб-сайт — Шрифт значка будет обслуживаться непосредственно вашим веб-сайтом
  2. Импорт из URL-адреса — шрифт значка обслуживается с другого хоста, например AWS, или поставщика хоста шрифтов значков, такого как Icomoon
  3. .

Загрузка иконок шрифтов в формате Icomoon

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

Чтобы загрузить шрифт Icon в формате Icomoon:

  1. Перейдите в Acquia Cohesion> Настройки веб-сайта> Библиотеки значков
  2. В шрифтах Icon щелкните Загрузить шрифт значка Icomoon кнопку
  3. Добавлена ​​новая строка полей, и вы должны увидеть, что Icomoon отображается в поле. Это семейство шрифтов
  4. .
  5. Нажмите кнопку Upload.zip и перейдите к своему.zip-файл, содержащий ваш значок шрифта. Это должно включать ваш значок шрифта в форматах EOT, SVG, TTF, WOFF, WOFF2. Успешно загруженные файлы шрифтов будут отмечены зеленой галочкой
  6. Введите имя в поле Метка
  7. Нажмите Загрузить JSON и выберите файл JSON. Вы можете скачать это с сайта Icomoon. Он предоставляет указатель ваших значков и требуется для средства выбора значков. Узнайте больше о начале работы с Icomoon
  8. Щелкните Сохранить.

Загрузка иконочных шрифтов в формате Fontello

Fontello — популярный генератор шрифтов для иконок. Он не предоставляет хостинг шрифтов Icon. Узнайте больше о Fontello здесь.

Чтобы загрузить шрифт Icon в формате Fontello:

  1. Перейдите в Acquia Cohesion> Настройки веб-сайта> Библиотеки значков
  2. В шрифтах Icon нажмите на Синюю кнопку со стрелкой и выберите Загрузить шрифт значка Fontello
  3. Добавлена ​​новая строка полей, и вы должны увидеть, что в поле отображается фонтелло.Это семейство шрифтов
  4. .
  5. Нажмите кнопку Upload.zip и перейдите к файлу .zip, содержащему ваш значок шрифта. Это должно включать ваш значок шрифта в форматах EOT, SVG, TTF, WOFF, WOFF2. Успешно загруженные файлы шрифтов будут отмечены зеленой галочкой
  6. Введите имя в поле Метка
  7. Нажмите Загрузить JSON и выберите файл JSON. Вы можете скачать его с сайта Fontello. Он предоставляет указатель ваших значков и требуется для средства выбора значков.Узнайте больше о начале работы с Fontello
  8. Нажмите Сохранить

Загрузка значков шрифтов в произвольном формате

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

Чтобы загрузить шрифт Icon в пользовательском формате:

  1. Перейдите в Acquia Cohesion> Настройки веб-сайта> Библиотеки значков
  2. В шрифтах значков нажмите на Синюю кнопку со стрелкой и выберите Загрузить собственный шрифт значка
  3. Добавлен новый ряд полей
  4. Щелкните файл Upload. zip и перейдите к файлу .zip, содержащему шрифт значка. Это должно включать ваш значок шрифта в форматах EOT, SVG, TTF, WOFF, WOFF2. Успешно загруженные файлы шрифтов будут отмечены зеленой галочкой
  5. Введите имя в поле Метка
  6. Введите семейство шрифтов в поле Семейство шрифтов . Оно должно совпадать с названием загруженного вами семейства шрифтов
  7. Нажмите Загрузить JSON и выберите файл JSON.Это должно быть в таком формате
  8. Нажмите Сохранить

Импорт шрифтов веб-иконок с помощью Icomoon

Icomoon предоставляет услугу премиум-класса, позволяющую управлять размещением вашего графического шрифта на Amazon S3 или CloudFront. Если вы используете эту службу, все, что вам нужно сделать, это добавить URL-адрес размещенного шрифта и загрузить файл JSON, который они предоставляют. Узнайте больше об Icomoon здесь.

Чтобы импортировать значок шрифта из Icomoon:

  1. Перейдите в Acquia Cohesion> Настройки веб-сайта> Библиотеки значков
  2. В шрифтах Icon щелкните Импортировать шрифт значка Icomoon кнопку
  3. Введите имя в поле Метка .Мы рекомендуем включить на этикетку «Icomoon», чтобы вы знали, что это шрифт Icomoon в будущем.
  4. Введите URL-адрес, где расположен шрифт значка, в поле @import . Если вы используете Icomoon для размещения вашего шрифта, он предоставляется им
  5. Нажмите Загрузить JSON и выберите файл JSON. Вы можете скачать это с сайта Icomoon. Он обеспечивает указатель ваших значков и требуется для средства выбора значков
  6. .
  7. Щелкните Сохранить.

Импорт шрифтов веб-иконок с помощью Fontello

Чтобы импортировать иконочный шрифт из Fontello:

  1. Перейдите в Acquia Cohesion> Настройки веб-сайта> Библиотеки значков
  2. В шрифтах Icon нажмите Синюю кнопку со стрелкой и выберите Импортировать шрифт значка Fontello
  3. Появится новый ряд полей
  4. Введите имя в поле Метка . Мы рекомендуем включать на этикетку «Fontello», чтобы вы знали, что это шрифт Fontello в будущем.
  5. Введите URL-адрес, где расположен шрифт значка, в поле @import
  6. Нажмите Загрузить JSON и выберите файл JSON. Вы можете скачать это с Fontello. Он обеспечивает указатель ваших значков и требуется для средства выбора значков
  7. .
  8. Нажмите Сохранить

Импорт шрифтов веб-иконок в произвольном формате

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

Чтобы импортировать значок шрифта в пользовательском формате:

  1. Перейдите в Acquia Cohesion> Настройки веб-сайта> Библиотеки значков
  2. В шрифтах значков нажмите на Синюю кнопку со стрелкой и выберите Импортировать пользовательский шрифт значка
  3. Появится новый ряд полей
  4. Введите имя в поле Метка
  5. Введите URL-адрес, где расположен шрифт значка, в поле @import
  6. Нажмите Загрузить JSON и выберите файл JSON.
Comments