/ Адаптивность / Иконочные шрифты и сборки иконок

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

HIT

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

icomoon.io

В данном сервисе можно собрать необходимый набор иконок. Получившийся комплект весит крайне мало, что является безусловным плюсом. Но в бесплатном наборе иконки громоздкие по стилистике и нет некоторых нужных. В платных можно подобрать (1 набор (1000-1500 иконок) — 50-60 $).

На IcoMoon App — Icon Font, SVG, PDF & PNG Generator можно загрузить свои svg (например из наборов Font Awesome) и сгенерировать из них шрифт. После подключения стилей и загрузки шрифтов иконки вызываются так (название и коды иконок нужно смотреть либо на экране IcoMoon App при генерации, либо в файле стилей):

<i class="icon-phone1"></i>

С иконками duotone сложнее. Чтобы использовать иконку duotone нужен такой код:

<span class="icon-search"><span class="path1"></span><span class="path2"></span></span>

Dashicons

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

Font Awesome

Отличный иконочный шрифт. Огромное множество иконок, в 3-х вариантах толщины, с 4 версии добавились 2-хцветные варианты. Но нет возможности собрать собственный набор иконок, нужно подключать блоками шрифтов.

Нашел способ собрать набор — см. выше icomoon.io

Использование SVG

Если набор иконок для стандартного сайта составляет 5-10 шт. Есть смысл загрузить их отдельно в виде svg.

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

[site-socialshare]
  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Иконочные шрифты и сборки иконок
Кнопки Share без плагинов и сервисов
Рекомендации для васКнопки Share без плагинов и сервисовOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.