Если вам надоели иконки FontAwesome или вы просто хотите добавить на свой сайт красивые «плоские» иконки быстро и бесплатно, тогда статья для вас.

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

Создаем шрифт с иконками онлайн

или делаем свой FontAwesome

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

Выбираем иконки

Переходим на сайт конструктора — https://icomoon.io/app/ и выбираем (выделяем) нужные иконки, просто кликнув на них:

icon-select.
Затем переходим на вкладку Generate Font:

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

Добавляем стили

После того как вы выбрали иконки и загрузили вкладку Generate Font вы увидите таблицу иконок с опциями. Для начала сделаем настройки самого шрифта:

setup-icons
Я выставила настройки, следующим образом:

font-setup
На странице генерации шрифтов, при наведении на ячейку появится надпись Get Code и там будут указаны стили, которые и будут использоваться на странице. И HTML-код в место, где вы хотите использовать иконку.

icon-setup

Добавляем шрифт с иконками к сайту

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

Используем иконки на странице сайта

Если вы использовали FontAwesome, то вы знаете что делать. Нужно в месте, где должна быть иконка вставить элемент с классом иконки:

У меня на сайте это выглядит так:

icon-example

Надеюсь была полезной и удачи!