Создайте свой собственный набор иконок шрифтов легко с Fontello

Мы видим, что иконки шрифтов широко используются на разных сайтах, и на то есть веские причины. Значок шрифта надежен, выглядит четким и четким на экране с высоким разрешением и легко настраивается с точки зрения размера значка, цвета и положения значка с помощью CSS. Это позволяет легко анимировать иконки шрифтов с помощью CSS3 Transforms и Transitions.

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

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

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

Готовим иконки

Прежде всего, нам нужно подготовить иконки. Иконки должны быть в векторном виде. Если вы знакомы с векторными приложениями, такими как Adobe Illustrator, Inkscape и CorelDraw, вы можете создавать свои собственные значки. Убедитесь, что значки сохраняют одинаковые черты, а затем экспортируйте их в формат SVG.

Кроме того, вы также можете собирать SVG-иконки, которые доступны онлайн бесплатно.

Читайте также: 50 сайтов для бесплатного скачивания векторных изображений

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

Вот что я выбрал:

Некоторые из этих значков состоят из нескольких фигур. Поэтому, прежде чем мы сможем разместить их как значок шрифта, мы должны объединить фигуры в одно соединение. Для этого откройте файл .svg в Illustrator. Выделите все фигуры и перейдите: Объект> Составной контур> Создать.

Сделайте это и с другими значками.

Создание шрифта

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

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

Выберите ваши собственные значки, установите имя шрифта и нажмите кнопку «Загрузить».

Fontello сгенерирует все необходимые форматы шрифтов: .svg, .eot, .ttf и .woff. и таблицы стилей плюс демо.

Это оно. Создание иконок шрифтов никогда не было так просто. Я надеюсь, что вы найдете этот совет полезным.