Pure CSS Icons Generator для разработчиков веб-интерфейса

Adobe дизайнер Вентинг Чжан создал интересное веб-приложение для генерации чистых иконок CSS. Он просто называется «CSS Icon» и может быть одним из самых классных генераторов иконок для разработчиков веб-интерфейсов.

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

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

Вы можете выбирать между тонкими линиями или темными значками. Они оба используют схожие свойства CSS, и вы даже можете увидеть, что это такое, щелкнув по любому значку в списке. Вы увидите скользящую боковую панель с кодом HTML и CSS вместе с увеличенным значком.
Если вы посмотрите в верхний правый угол полей кода, вы увидите маленький значок копирования. Нажмите, чтобы автоматически скопировать код в буфер обмена. Ах, а этот значок копирования? Также построен с использованием чистого кода Wenting.

Чтобы изменить цвет любого значка, просто найдите свойство color в главном классе значков. Обновление этого свойства одного цвета также изменит все остальное.

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

Проверьте Домашняя страница CSS Icon чтобы увидеть больше примеров и скопировать / отредактировать источник. Вы также можете проверить каждую иконку отдельно в CodePen если вы хотите поиграть с источником в вашем браузере.