Ця галерея чистих іконок CSS є те, що хочуть всі розробники інтерфейсу

Дизайнер Adobe Wenting Zhang створив цікавий веб-додаток для генерування чистих іконок CSS. Він просто названий “Піктограма CSS” і це може бути одним з найхолодніших значок генератори для розробників інтерфейсів.

Цей проект є абсолютно безкоштовно і відкритим джерелом на GitHub так що ви можете вільно завантажувати і зіпсувати будь-який код.

Ці іконки не мають залежностей CSS або потрібні спеціальні функції браузера. На перший погляд, може здатися, що іконки побудовані на SVG, але вони насправді просто диви.

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

Ви можете вибирати між ними тонка лінія піктограм або темно заповнені іконки. Вони обидва використовують подібні властивості CSS і ви навіть можете побачити, що вони, натиснувши будь-яку піктограму у списку. Ви побачите ковзання бічної панелі з кодом HTML і CSS разом із значком, збільшеним.

Якщо ви подивитеся у верхньому правому куті кодових полів, ви побачите маленька копія значок. Натисніть, щоб перейти автоматично копіює код у буфер обміну. Ах, і що копіювати іконку? Також створений чистий CSS-код Wenting.

До змінити колір будь-якої піктограми, просто знайди колір власності у головному класі піктограм. Оновлення цього колір власності змінить і все інше.

Оскільки ці іконки є досить просто, вони, ймовірно, не працюватимуть на кожному веб-сайті. Але це крута альтернатива зображенням або шрифтам іконок і це абсолютно безкоштовно.

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