Эта галерея иконок на чистом CSS — то, что хотят все разработчики интерфейсов

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

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

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

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

Вы можете выбрать между иконки тонкая линия или же темные заполненные значки. Они оба используют похожие свойства CSS и вы даже можете увидеть, что они из себя представляют, щелкнув любой значок в списке. Вы увидите скользящая боковая панель с кодом HTML и CSS вместе с увеличенным значком.

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

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

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

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