—»     —»   Создаем собственные иконические шрифты при помощи Fontello
  Раздел: Шрифты   Нет комментариев  

Создаем собственные иконические шрифты при помощи Fontello



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

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

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

Подготавливаем иконки

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

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

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

Вот что выбрали мы:

Создаем собственные иконические шрифты при помощи Fontello

Некоторые из этих иконок состоят из нескольких форм. Так что, перед тем, как мы сможем поместить их в набор для иконического шрифта, нам нужно будет соединить формы в одну композицию. Чтобы сделать это, откройте .svg в Illustrator. Выберите все формы, и пройдите в меню Object > Compound Path > Make.

Создаем собственные иконические шрифты при помощи Fontello

Повторите данную операцию и с другими иконками.

Разработка шрифта

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

Создаем собственные иконические шрифты при помощи Fontello

Вы можете кликнуть по иконке с карандашом, чтобы отредактировать свойства иконки, а точнее: CSS Name и Hex Code.

Создаем собственные иконические шрифты при помощи Fontello

Выберите ваши личные иконки, укажите название шрифта и затем нажмите кнопку Download.

Создаем собственные иконические шрифты при помощи Fontello

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

Создаем собственные иконические шрифты при помощи Fontello

И на этом все! Ранее процесс создания собственных шрифтов еще никогда не был таким простым. Надеемся, что это руководство помогло вам!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: шрифты
Опубликовал Design FactoRy   Прочитано (раз): 3800   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Февраль 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728