Тази галерия от чисти икони на CSS е това, което искат всички Frontend разработчици

Adobe дизайнер Wenting Zhang създаде интересно уеб приложение за генериране на чисти CSS икони. Това е просто име “Икона на CSS” и може да е един от най-готините генератори на икони за разработчици на интерфейси.

Този проект е напълно безплатно и отворен код на GitHub така че вие ​​сте свободни да изтеглите и объркате с кодовете.

Тези икони нямат никакви CSS зависимости или се нуждаете от специални функции на браузъра. На пръв поглед може да изглежда, че иконите са изградени на SVG, но те всъщност са само диви.

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

Можете да избирате между икони с тънка линия или тъмни икони. И двамата използват подобни CSS свойства можете дори да видите какви са те, като кликнете върху някоя икона в списъка. Ще видите a плъзгаща се странична лента с HTML и CSS кода заедно с увеличената икона.

Ако погледнете към горния десен ъгъл на полетата с кодове, ще видите a малко копие на иконата. Кликнете върху това до автоматично копирате кода в клипборда. О, и тази копирна икона? Също така е построен с чист CSS код на Wenting.

Да се променете цвета на всяка икона, просто намери цвят Имот в основния клас на икони. Това се актуализира цвят Имот ще промени и всичко останало.

Тъй като тези икони са доста проста, те вероятно няма да работят за всеки уебсайт. Но това е страхотна алтернатива на изображения или шрифтове на икони и е напълно безплатно.

Разгледайте Начална страница на CSS икона да се виж повече примери и към копиране / редактиране на източника. Можете също тествайте всяка икона поотделно в CodePen ако искате играе с източника в браузъра си.