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

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

Иконочные шрифты 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.

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

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

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

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

Статья, в которой рассмотрим процесс создания иконочного шрифта с помощью сервиса IcoMoon (https://icomoon. io/).

Разработка персонального иконочного шрифта для сайта является одной из основных задач веб-разработчика. Т.к. использование готовых наборов шрифтов, может сильно «утяжелить» загрузку страниц сайта. Это связано с тем, что они содержат большое количество иконок (Font Awesome — 675 иконок, IconMoon — 491, Foundation Icons — 283, Glyphicons Halflings – более 250). В то время как количество иконок, которых реально требуется для оформления среднего сайта, находится в диапазоне от 20 до 50 единиц.

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

Использование иконок в таком формате является очень привлекательным решением. Во-первых, такими иконками очень просто управлять, т.е. изменять их размер, цвет и другие параметры. Осуществляется это с помощью таких же свойств CSS, которые применяются для стилизации обычного текста (font-size, color и др.). Во-вторых, в формате шрифта иконки находятся в векторном формате. Это означает то, что они хорошо масштабируются и отлично выглядят на экранах устройств с высокой плотностью пикселей. Кроме этого шрифт — это сжатый формат, а значит, для его загрузки может потребоваться гораздо меньше времени, чем для загрузки аналогичных векторных изображений. Ещё одним неоспоримым плюсом шрифтовых иконок является то, что они поддерживаются всеми браузерами. Осуществляется это благодаря созданию на базе одного пакета иконок шрифтов в различных форматах: eot, ttf, svg и woff. Это необходимо выполнить для того, что браузер использовал тот формат шрифта, который он «понимает». Потому что на текущий момент нет ни одного формата шрифта, который бы поддерживался всеми браузерами.

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

Основный алгоритм действий по созданию шрифта в IcoMoon App

Рассмотрим некоторые основные шаги по разработке шрифта в сервисе IcoMoon App:

  1. Перейти на страницу IcoMoon App, с помощью кнопки, расположенной на главной странице сервиса или используя URL адрес: https://icomoon.io/app/.
  2. Ввести название проекта (значок «Manage Projects»).
  3. Добавить в проект при необходимости шрифт Font Awesome (кнопка с тремя полосочками -> Icon Library).
  4. Добавить в проект пустой набор, который можно использовать для помещения в него пользовательских (своих) иконок (кнопка с 3 линиями -> New Empty Set).
  5. Задать название только что созданному набору (кнопка с тремя полосочками -> View / Edit Info).
  6. Добавить в набор пользовательские (свои) значки (кнопка «3 горизонтальные линии» -> Import to Set).
  7. Выбрать иконки, которые необходимо добавить в результирующий набор, с помощью инструмента «Select».
  8. Выполнить генерацию шрифта (нажать внизу страницы на элемент «Generate Font»).
  9. Нажать на значок шестерёнки и в открывшемся диалоговом окне ввести название шрифта (Font Name), префикс класса (Class Prefix), выбрать опцию «Use a class» (Использовать класс) и указать в поле значение «.icon».
  10. Нажать на кнопку «Download».
Работа в сервисе IcoMoon — Выбор иконок (шаг 1)Работа в сервисе IcoMoon — Указание названий значкам (шаг 2)Работа в сервисе IcoMoon — Установки для генерации шрифта

Подключение иконок в формате шрифта к странице

Для установки иконочного шрифта необходимо распаковать архив, созданный сайтом IcoMoon, и перенести из него в рабочий проект каталог fonts (шрифты) и файл «style.css».

По умолчанию папка со шрифтами должна располагаться в том же каталоге что и файл CSS. Для того чтобы каталог fonts расположить по-другому, необходимо внести соответствующие изменения в файл «style.css».

Подключения шрифта к странице и классов для удобной работы с ним осуществляется посредством файла «style. css».


<!-- path-to - путь до файла style.css -->
<link href="path-to/style.css" rel="stylesheet">

При желании содержимое файла «style.css» можно включить в свой файл стилей. Это позволит сократить количество HTTP-запросов и немного увеличить загрузку страницы.

Использование иконок на странице

Применение иконок созданного шрифта на странице осуществляется с помощью элемента i, к которому необходимо добавить базовый класс icon (определяется на основе настройки «Use a class») и класс иконки.


<!-- icon - базовый класс -->
<!-- icon-ok - класс иконки ok -->
<i></i>

Разработку собственных социальных значков для сайта очень просто выполнить в открытом векторном SVG редакторе Inkscape.

Для этого их можно нарисовать или воспользоваться уже существующими изображениями иконок из бесплатных наборов.

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

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

Создание иконки «Twitter» в Inkscape

Пример иконок социальных сетей в форме прямоугольника со скруглёнными краями.

Сборка шрифта из созданных иконок в IcoMoon

Скачать шрифт с социальными иконками и исходные коды можно по следующей ссылке: https://yadi.sk/d/oaOfUROSyTjDQ.

Использование социальных иконок на странице (классы социальных значков можно посмотреть в файле «style.css»):


<i></i>

Кроме IcoMoon есть ещё и другие онлайн сервисы для создания значков в виде шрифта. К ним относится «fontello.com», «fontastic.me», «glyphter.com», «pictonic.co» и др.

Icon Font & SVG Icon Sets ❍ IcoMoon

Решения Pixel Perfect Icon

Apple, Google, Microsoft, Samsung, Yahoo
— некоторые из компаний, которые доверились нашим услугам.

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

История

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

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

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

Нужно связаться с нами? Воспользуйтесь нашей контактной формой.

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

  • Купите один из наборов значков IcoMoon
  • Стать премиум-пользователем
  • Если у вас есть какие-либо отзывы, сообщите нам об этом
  • Расскажите своим друзьям об IcoMoon
    (поделиться на Твиттер, Фейсбук)

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

Адрес электронной почты Пароль

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

Забыли пароль?

Впервые на IcoMoon? Зарегистрируйтесь бесплатно

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

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

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

Уже есть учетная запись? Войти

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

Гибкость:

Интернет оптимизирован для отображения текста. Легко меняйте цвет значков или применяйте другие эффекты CSS. В Unicode есть четкие определения для значков и эмодзи. Шрифты всегда предназначались для букв и значков.

Масштабируемость:

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

Vector:

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

Быстро:

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

Демонстрационное видео

Доступно:

Если все сделано правильно, иконочные шрифты на 100% доступны и совместимы с программами чтения с экрана. Беспокоитесь о людях с дислексией или о расширениях, позволяющих переключать шрифты? Существует простое решение CSS.

Локальное использование:

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

Создание пользовательских шрифтов

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

Pixel Perfect Results

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

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

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

Потрясающий инструмент для создания иконок

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

Импорт собственных векторов

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

Comments
Leave Comment