Icomoon шрифт: Icon Font & SVG Icon Sets ❍ IcoMoon

Иконочные шрифты 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-код ссылки для форумов (например, можете поставить её в подписи):
   
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

IcoMoon – шрифты с иконками и css спрайты для сайта

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

Шрифты с иконками (иконочные) – это обычные шрифты, только символы представлены в виде иконок. Что позволяет управлять ими с помощью CSS стилей, так же, как и обычными шрифтами.

Такие иконки сейчас очень популярны при создании различных интернет-проектов. Пример таких иконок вы можете увидеть на моём блоге – это иконки социальных сетей, метаданных, обозначение комментариев и так далее.

Я уже рассказывал вам о применении таких иконок при создании сайта, когда речь шла о псевдоэлементах before и after. Где в качестве инструмента для подбора иконок использовался сервис Awesome.

Возможности сервиса IcoMoon.

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

В сервисе на выбор есть бесплатные наборы иконок и платные. В бесплатном доступе у вас будет 490 иконок.

Все иконки – это векторные изображения, которые вы можете скачать в формате SVG, PDF, EPS, Ai. А в платном пакете и в рабочем формате фотошопа PSD.

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

Пакеты доступных иконок

Вы также можете загружать свои собственные иконки и делать из них шрифты. А ещё вы можете установить приложение IcoMoon для браузера Гугл Хром и работать с иконками даже без подключения к сервису.

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

Преимущества и недостатки шрифтов с иконками.

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

1 – гибкое управление цветом, размером и другими эффектами с помощью CSS стилей.

2 – масштабировать иконки так же легко, как и шрифты без потери качества.

3 – иконки одинаково хорошо смотрятся на различных экранах устройств. То есть они адаптивные.

4 – все иконки в проекте загружаются одним http запросом. Что ускоряет загрузку сайта в целом.

5 – иконки, как буквы в тексте, очень мало весят и загружаются моментально.

6 – шрифты иконки совместимы со всеми браузерами.

7 – скачав шрифты, вы можете использовать их в локальных проектах.

К недостаткам можно отнести то, что на некоторых мобильных браузерах иконки всё-таки не отображаются.

Иконки созданы по сетке 16Х16, 32Х32 и так далее. Так вот если вы захотите использовать нестандартный размер, то без дополнительных стилей css не обойтись.

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

Как создать шрифт с иконками и css спрайты в сервисе IcoMoon?

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

Но как правило, для проекта не нужно столько иконок и достаточно выбрать только самые необходимые. Для этого нажимаем на кнопку IcoMoon App.

Включаем генератор иконок

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

Доступные инструменты генератора

Изначально представлены лишь основные иконки, дополнительные можно выбрать из библиотеки. Для этого нужно пролистать страницу вниз и нажать на ссылку Add Icons From Library…. После чего выбираете понравившиеся иконки и нажимаете на кнопку Add.

Добавление иконок из библиотеки

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

Как создать css спрайт из иконок?

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

После, нажимаете на кнопку Generate SVG, PNG, PDF.

Создание спрайта

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

Изменение параметров спрайта

По умолчанию для скачивания выбраны форматы иконок SVG и PNG. А нам ещё нужно выбрать формат css спрайта и задать параметры отступа. Также можно добавить фоновое изображение и изменить цвет, но это уже по желанию.

Для того чтобы выбрать формат спрайта нажмите на кнопку Preferences – отметьте чекбокс Include Tiles (css sprite) и задайте отступы между иконками.

Выбор формата css спрайт

После того как свойства определены, нажимаете на кнопку Download, внизу экрана и скачиваете архив со всеми необходимыми файлами. Где у вас будут и файлы с изображениями, и стили css.

Файлы спрайта

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

Скачать спрайт

Примечание: в стилях для спрайтов указан путь к файлу в формате SVG, вы же, используйте файл в формате PNG, его же и загружайте на хостинг. Файлы в этом формате меньше весят на 40-50%.

Как создать шрифт с иконками?

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

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

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

Свойства шрифта

Перед сохранением и скачиванием шрифта, откройте свойства Preferences и отметьте чекбокс Support IE7 & IE6. Это обеспечит показ иконок на старых браузерах. Правда, это обеспечение придётся ещё подключить к сайту.

Подключение поддержки старых браузеров

Для скачивания шрифта необходимо нажать на кнопку Download.

Скачивание шрифта

Вот и всё готово к установке на сайт.

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

О том, как установить css спрайты на сайт я уже рассказывал. Кому интересно, посмотрите статью по ссылке. Здесь же рассмотрим вариант использования шрифтов с иконками с сервиса IcoMoon.

Шаг 1.

Для начала нужно распаковать архив со шрифтами и скопировать папку Font на ваш хостинг. Для WordPress лучше скопировать эту папку в папку с темой.

Шаг 2.

В папке с архивом, который вы скачали с сервиса IcoMoon, есть файл style. css. Все стили из этого файла нужно перенести в ваш основной файл стилей. Я покажу именно такой пример. Но, можно переименовать этот файл и подключить его как отдельный файл стилей.

Вставить эти стили лучше всего в начале основного файла стилей, перед тегом body. Для этого открываем административную панель WordPress – «Внешний вид» – «Редактор» – «Таблица стилей (style.css)». И вставляем стили.

Вставка стилей шрифта

Шаг 3.

Теперь в нужном месте исходного кода нужно вставить код, отвечающий за вывод иконки.

Конструкция этого кода выглядит так:

<span></span>

где, icon-home3 – это название иконки.

Посмотреть название иконки можно в файле demo.html, который также находится в архиве, скачанном ранее с IcoMoon.

Просмотр имён иконок

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

Изначально вид меню имеет вот такой вид.

Вид меню без иконок

Теперь, необходимо в исходный код меню внедрить и код иконок, с учётом пунктов меню. Меню располагается в файле header.php. Вот именно его я открываю и рядом с названием пунктов меню добавляю код иконок. Прямо внутри ссылки. Так, иконка унаследует стили ссылки.

Вставка кода иконки

В итоге добавления шрифта с иконками, меню приобрело следующий вид.

Вид меню с иконками на компьютере

Вид меню с иконками на смартфоне

Согласитесь, такое меню смотрится привлекательней. И всё благодаря шрифтам с иконками. Таким образом, иконки можно внедрить в любом месте на сайте, где это необходимо. А используя стили css, можно придать иконке нужный вид.

А теперь посмотрите видеоурок в котором я шаг за шагом показываю, как создать шрифты с иконками и как их установить на сайт.

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

С уважением, Максим Зайцев.

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

Статья, в которой рассмотрим процесс создания иконочного шрифта с помощью сервиса 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» и др.

Создание собственного шрифта значков с помощью 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 {&:before{content: "\e603";}} .pixie.icon-image {&:before{content: "\e60d";}} .pixie.icon-film {&:before{content: "\e613";}} .pixie.icon-quotes {&:before{content: "\e676";}} .pixie.icon-spinner {&:before{content: "\e67c";}} .pixie.icon-list {&:before{content: "\e6b5";}} .pixie.icon-numbered-list {&:before{content: "\e6b6";}} .pixie.icon-link {&:before{content: "\e6c3";}} .pixie.icon-spell-check {&:before{content: "\e700";}} .pixie.icon-bold {&:before{content: "\e744";}} .pixie.icon-underline {&:before{content: "\e745";}} .pixie.icon-italic {&:before{content: "\e746";}} .pixie.icon-strikethrough {&:before{content: "\e747";}} .pixie.icon-omega {&:before{content: "\e748";}} .pixie.icon-table {&:before{content: "\e74b";}} .pixie.icon-paragraph-left {&:before{content: "\e754";}} .pixie.icon-paragraph-center {&:before{content: "\e755";}} .pixie.icon-paragraph-right {&:before{content: "\e756";}} .pixie.icon-paragraph-justify {&:before{content: "\e757";}} .pixie.icon-indent-increase {&:before{content: "\e758";}} .pixie.icon-indent-decrease {&:before{content: "\e759";}} .pixie.icon-code {&: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, мы получили довольно полезный продукт, который мы можем использовать снова и снова.

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

Как создать свои собственные шрифты с помощью 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, чтобы сохранить исходные пропорции.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Page not found (404)

Toggle navigation

• 
  Packs
  • Значок пакеты недавно Загрузил
  • Самых популярных значок пакеты
  • Эксклюзивные наборы значков

• 
  категории
  • Сельское хозяйство Иконки
  • Животные Иконки
  • Аватар и смайлики Иконки
  • Красота и мода Иконки
  • Бизнес и финансы Иконки
  • Мультфильм Иконки
  • Кино, телевидение и фильмы Иконки
  • Одежда и аксессуары Иконки
  • Преступление и безопасность Иконки
  • Культура, религия и фестивали Иконки
  • Дизайн и разработка Иконки
  • Экология, окружающая среда и природа Иконки
  • Электронная торговля и покупки Иконки
  • Электронные устройства и оборудование Иконки
  • Файлы и папки Иконки
  • Флаги и карты Иконки
  • Дизайн и разработка Иконки
  • Экология, окружающая среда и природа Иконки
  • Gym и Fitness Иконки
  • Здравоохранение и медицина Иконки
  • Промышленность и инфраструктура Иконки
  • Инфографика Иконки
  • Дети Иконки
  • люблю Иконки
  • Разное Иконки
  • Музыка и мультимедиа Иконки
  • Сеть и связь Иконки
  • Недвижимость и строительство Иконки
  • Школа и образование Иконки
  • Наука и технологии Иконки
  • SEO и Web Иконки
  • Sign и Symbol Иконки
  • Социальные медиа и логотипы Иконки
  • Спорт и игры Иконки
  • Инструменты, строительство и оборудование Иконки
  • Транспорт и транспортные средства Иконки
  • Путешествия, отели и каникулы Иконки
  • Пользовательский интерфейс и жесты Иконки
  • Погода и сезоны Иконки
• 
  стили значков
  • 3D Иконки
  • Badge Иконки
  • Filled outline Иконки
  • Flat Иконки
  • Glyph Иконки
  • Handdrawn Иконки
  • Long shadow Иконки
  • Outline Иконки
  • Photorealistic Иконки

• 
  Популярные поиски
  • Instagram Иконки
  • Vk Иконки
  • телефон Иконки
  • Папки Иконки
  • деньги Иконки
  • Социальные Иконки
  • Facebook Иконки
  • Telegram Иконки
  • Viber Иконки
  • корзина Иконки
  • Whatsapp Иконки
  • стрелка Иконки
  • Youtube Иконки
  • дом Иконки
  • Phone Иконки
  • люди Иконки
  • почта Иконки
  • папки Иконки
  • человек Иконки
  • доставка Иконки
  • галочка Иконки
  • папка Иконки
  • музыка Иконки
  • Mail Иконки
  • компьютер Иконки
  • вк Иконки
  • Steam Иконки
  • Instagram Иконки
  • сайт Иконки
  • фото Иконки

• Log in
• Register

404 Icon by Laura Reen

Полезные ресурсы для фронтенд-разработчиков | Webdevkin

март
30
, 2015

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

jstree — отличный jQuery-плагин для построения дерева категорий

Простая инициализация на основе json-данных, причем несколькими способами,
поддержка drag & drop, навигация клавишами, возможность кастомизации и
внятная документация — и это далеко не полный список из предлагаемых плагином возможностей.
Рекомендую!

jstree.com

Простой сервис форматирования json

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

jsonformatter.curiousconcept.com

Генератор шрифтов web-font-generator.com

Удобный онлайн-генератор шрифтов. В чем смысл?
Вы загружаете файл шрифта, на выходе получаете архив с набором шрифтов: eot, svg, ttf и woff.
А также html-файл (для демонстрации шрифта) и css с кодом подключения. Очень удобно!

www.web-font-generator.com

Генератор спрайтов instantsprite.com

Загружаете на сайт картинки для спрайтов, задаете расстояние между ними, положение, в котором нужно выстроить спрайт
(горизонтальное или вертикальное) и получаете на выходе готовую png-шку или gif-ку. Мелочь, а приятно.

instantsprite.com

Иконочные шрифты icomoon.io

Очень крутая тема. Такие шрифты удобно использовать в качестве иконок, но не создавать иконки не через img и background-image,
а через font-face и content. В общем, чтобы понять прелесть этого, лучше попробовать, чем читать 🙂


Сервис позволяет не только скачать множество таких шрифтов, но и создавать их самим.

icomoon.io

underscore и lodash

Легковесные библиотеки, которые должен знать каждый javascript-разработчик.
Работа с коллекциями, массива, функциями, объектами, шаблонизация и многое другое.
В lodash больше функционала, поэтому лично я предпочитаю использовать именно его.
В lodash в дополнение к вышеозначенному есть функции работы со строками, числами,
интересный набор утилит. В общем, смотрите, пробуйте.
Как правило, функции, реализованные в underscore, присутствуют и в lodash,
причем с такими же названиями и параметрами (почти всегда).
Но плюс underscore — наличие документации на русском.

underscore на русском

underscore на английском

lodash на английском

lodash, документация

Блог Frontender Magazine

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

frontender.info

highcharts.js — красивые графики и диаграммы

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

highcharts.com

todomvc.com

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


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


Кроме всем известных и популярных angular, backbone, react на этом проекте есть реализации TODO-листа на нативном javascript и jquery.
Очень рекомендую посмотреть их, узнаете много нового, интересного и поймете, насколько по-разному можно подходить к написанию кода.

todomvc.com

javascript.ru

Здесь даже не знаю, что комментировать…
На мой взгляд, лучший в рунете учебник по javascript от крутого чувака по имени Илья Кантор.
Рекомендую к прочтению всем, особенно начинающим.

javascript.ru

Список будет дополняться…

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

А какие хорошие ресурсы есть у Вас на заметке? Напишите в комментариях!

Анонсы статей, обсуждения интернет-магазинов, vue, фронтенда, php, гита.

Истории из жизни айти и обсуждение кода.

Как Вам статья? Оцените!

Понравилось? Поделись с другими 🙂

Please enable JavaScript to view the comments powered by Disqus.

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

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

Используя приложение 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 — Отличный инструмент для пользовательских значков шрифтов — Документация

Font Icons довольно популярны и полезны в наши дни.Их использование для содержания нашего веб-сайта дает различные преимущества. Давайте рассмотрим несколько преимуществ, на которые стоит обратить внимание.

• Гибкость: Текст, отображаемый на веб-странице, оптимизирован. Это упрощает применение свойств CSS к вашим значкам, как это делается для текста.
• Масштабируемость: Размер отображения значка шрифта можно изменить так же, как вы изменяете размер текста на веб-странице.
• Независимые от вектора: Значки шрифтов не зависят от вектора и разрешения.Все значки четкие и четкие на всех типах дисплеев с разным разрешением. Они хорошо смотрятся как на мобильных устройствах, так и на компьютерах.
• Fast: Если у вас есть значки как часть ваших шрифтов, вы можете загрузить их с помощью одного HTTP-запроса.
• Специальные возможности: Если все сделано правильно, значки шрифтов на 100% доступны и совместимы с программами чтения с экрана.
• Можно использовать локально: Добавляя настраиваемые шрифты в вашу локальную систему, вы можете использовать их в различных приложениях для проектирования и редактирования.Назначение лигатур вашим глифам упростит их использование.

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

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

Важными особенностями IcoMoons являются:

• Сборка пользовательских шрифтов: Используя приложение IcoMoon, вы можете создавать свои собственные шрифты, содержащие только те значки, которые могут вам понадобиться.
• Pixel Perfect Results: Приложение IcoMoon учитывает размер сетки значков и генерирует результаты с идеальным пикселем. При правильном выравнивании.Установленный размер шрифта будет идеально отображаться в интерфейсе пользователя.
• Бесплатные иконки, бесплатное приложение: Приложение IcoMoon бесплатное. Вам не нужно ничего платить или возвращать кредит за его использование. Библиотека IcoMoon содержит множество высококачественных наборов значков. Все эти значки созданы в виде сетки и оптимизированы для использования с приложением IcoMoon. Добавьте любой сайт, на котором вы хотите легко просматривать и искать его значки.
• Инструмент для иконографии: Приложение IcoMoon — это усовершенствованный инструмент для иконографии.Он позволяет сортировать значки, управлять коллекциями значков или делать значки доступными для поиска, добавляя к ним теги. Помимо шрифтов, вы можете создавать PNG, SVG и CSS-спрайты любого размера и цвета.
• Импортируйте собственные векторы: В приложении IcoMoon вы можете импортировать собственные векторы (изображения SVG или шрифты SVG). Импорт иконок происходит локально в вашем браузере. Ваши векторы не будут загружены на наши серверы при их импорте. Также доступны некоторые основные параметры редактирования, такие как перемещение, зеркальное отображение и поворот.
• Работает в автономном режиме: После загрузки в браузере приложение IcoMoon работает в автономном режиме. Когда вы импортируете значок или генерируете шрифт, все происходит локально в вашем собственном браузере. Ваши значки / шрифты не будут загружены на наши серверы. Вы даже можете загрузить приложение IcoMoon, если у вас нет подключения, если вы установите его из Интернет-магазина Chrome.

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

Вся серия:

Как создать свой собственный набор значков веб-шрифтов с помощью IcoMoon

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

В недавней статье «Иконки Webfont: альтернатива изображениям» объяснялось, как можно загрузить один файл шрифта, например Iconic, и применить значки с помощью псевдоэлементов CSS, например.грамм.

 
<стиль>
.rss: до
{
семейство шрифтов: "IconicStroke";
content: "r";
}


 RSS-канал 
  

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

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

Они также представляют небольшую проблему доступности. Добавление содержимого с помощью псевдоэлементов CSS может заставить программы чтения с экрана произносить текст. В нашем примере выше вы могли услышать, как ваш компьютер заикается «r-RSS feed».

IcoMoon спешит на помощь

IcoMoon — великолепное приложение HTML5, которое решает эти проблемы за вас.Это позволяет:

1. Сначала просмотрите и найдите 600+ значков IcoMoon
2. Во-вторых, загрузите отдельные файлы SVG или свои собственные пакеты шрифтов (поддержка шрифтов SVG).
3. редактировать значки прямо в браузере
4. добавить любое количество иконок в коллекцию шрифтов
5. назначает эти шрифты любым символам, например, вместо использования «r» вы можете использовать пробел, чтобы ничего не читалось вслух.
6. Наконец, загрузите пример кода и крошечные пуленепробиваемые стеки шрифтов, содержащие выбранные вами значки.

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

Наведите указатель мыши на любой значок и нажмите изменить , чтобы выполнить базовое редактирование, такое как поворот, зеркальное отображение и сдвиг. Вы также можете загрузить значок как SVG, отредактировать его в Illustrator, Inkscape или SVG-edit и загрузить измененную версию:

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

Наконец, щелкните значок Download Font на нижней черной полосе, чтобы загрузить свой собственный ZIP-файл.

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

Как создать свой собственный набор значков веб-шрифтов с помощью IcoMoon

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

ДИЗАЙН https://visualmodo.com/wp-content/uploads/2017/05/design.zip

ЕДА https://visualmodo.com/wp-content/uploads/2017/05/food-icons.zip

ИНТЕРФЕЙС https://visualmodo.com/wp-content/uploads/2017/05/interface.zip

ИКОНЫ ЛИНИИ https://visualmodo.com/wp-content/uploads/2017/05/linearicons.zip

СПОРТ https://visualmodo.com/wp-content/uploads/2017/05/sports.почтовый индекс

Начало работы с Icomoon | DX8 Learn и поддержка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

загрузки • IcoMoon Free • Iconify

Как добавить icomoon-free: скачать на свой сайт:

Чтобы встроить icomoon-бесплатно: скачайте на своей странице добавьте следующий код:

Показать другой синтаксис HTML

Не забудьте добавить это в раздел (предпочтительный метод для более быстрой загрузки значков) или до :

Код

SVG для icomoon-free: скачать.

Используйте его для встраивания SVG прямо на страницу или для вставки его в приложение редактора пользовательского интерфейса, такое как Sketch, Adobe XD, Affinity Designer или Figma.

Большинство редакторов игнорируют атрибут SVG viewBox. Из-за этого, когда вы вставляете SVG в редактор, размеры часто не совпадают, что затрудняет выравнивание значка.Код ниже включает дополнительный прозрачный прямоугольник, соответствующий viewBox, поэтому, если вы вставите значок в редакторе, он будет иметь те же размеры, что и в HTML:

Или щелкните эту ссылку, чтобы загрузить SVG.

Добавьте код ниже в свою таблицу стилей, чтобы использовать icomoon-free: загрузить в качестве фона:

Добавьте код ниже в свою таблицу стилей, чтобы использовать icomoon-free: download как содержимое псевдоэлемента:

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

Добавьте приведенный ниже код в свой скрипт, чтобы использовать icomoon-free: download как компонент React.

Импорт:

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

Настройка icomoon-free: внешний вид загрузки:

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

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

Вы выбрали монотонный значок.

Монотонные значки не имеют жестко заданных цветов, что означает, что вы можете установить любой цвет.

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

.iconify {цвет: красный; }

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

По умолчанию высота установлена ​​на «1em», ширина автоматически регулируется для каждого значка.

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

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

.iconify {width: 24px; высота: 24 пикселя; }

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

Iconify — это самая универсальная из доступных фреймворков для иконок. Он предлагает один синтаксис для более чем 80 популярных наборов значков, включающих более 60 000 значков. Его также можно использовать с пользовательскими значками.

Фреймворк

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

Подробнее см. Документацию по фреймворку Iconify SVG.

Помимо инфраструктуры SVG, Iconify также доступен в виде собственных компонентов для React, Vue, Svelte и Angular.

Просмотрите 80+ наборов значков, которые предлагают более 60 000 хорошо продуманных значков, чтобы найти идеальные значки для вашего проекта!

Дизайнеры пользовательского интерфейса

могут импортировать значки непосредственно в проекты, используя плагин Iconify для Figma или плагин Iconify для Sketch.

Подробнее см. В документации Iconify.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы импортировать файл selection.