Рассмотрим различные варианты иконочных шрифтов с точки зрения создания из них ограниченного набора необходимых иконок. т.к для обычного сайта используется в среднем 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]
