Дизайнер Adobe Вентинг Чжан (Wenting Zhang) создал интересное веб-приложение для генерирующее чистые иконки CSS . Он просто называется «CSS Icon» и может быть одним из самых крутых генераторов иконок для разработчиков веб-интерфейса.
Этот проект полностью бесплатен и с открытым исходным кодом на GitHub так что вы можете свободно загружать и связываться с любым из кодов.
40 отличных мини-наборов иконок
Когда вы отправляетесь на поиски значков для ваших дизайнов, вы можете столкнуться с различными … Подробнее
Эти значки не имеют каких-либо зависимостей CSS или нуждаются в каких-либо специальных функциях браузера. На первый взгляд может показаться, что значки построены на SVG, но на самом деле они просто divs .
С помощью магии CSS вы можете создавать пользовательские значки линий для общих элементов интерфейса таких как меню гамбургера, значок с тремя точками или значок печати (среди многих других ).
Вы можете выбрать между тонкими линиями значков или темными значками . Они оба используют аналогичные свойства CSS и вы даже можете увидеть, что это такое, щелкнув по любому значку в списке. Вы увидите скользящую боковую панель с HTML и CSS-кодом вместе с увеличенной иконкой.
TheЕсли вы смотрите в верхний правый угол из полей кода вы увидите маленькую иконку . Щелкните ее, чтобы автоматически скопировать код в буфер обмена. О, и эта иконка копирования? Также построена с использованием чистого кода CSS Wenting .
Чтобы изменить цвет любой иконки, просто найдите свойство color в главном классе значков. Обновление этого свойства color также изменит все остальное.
Создать свой собственный набор иконок шрифтов с помощью Fontello
Мы видим, что иконки шрифтов широко используются на разных сайтах, и на то есть веские причины. Значок шрифта … Подробнее
Поскольку эти значки довольно простые они, вероятно, не подойдут для каждого веб-сайта. Но это крутая альтернатива изображениям или иконкам шрифтов и она совершенно бесплатна .
Посетите домашнюю страницу с иконками CSS — см. Другие примеры и скопируйте / отредактируйте источник . Вы также можете протестировать каждый значок отдельно в CodePen, если вы хотите поиграться с источником в своем браузере.
Загрузка...
