Galeri Ikon CSS Murni Ini Yang Diinginkan Semua Pengembang Frontend

Perancang Adobe Wenting Zhang menciptakan sebuah aplikasi web yang menarik untuk menghasilkan ikon CSS murni. Hanya diberi nama “Ikon CSS” dan itu mungkin salah satu yang paling keren ikon generator untuk pengembang frontend.

Proyek ini adalah sepenuhnya gratis dan bersumber terbuka di GitHub jadi Anda bebas mengunduh dan mengacaukan salah satu kode.

Ikon-ikon ini tidak memiliki dependensi CSS atau memerlukan fitur browser khusus. Pada pandangan pertama, sepertinya ikon dibangun di atas SVGs tetapi mereka sebenarnya hanya divs.

Melalui keajaiban CSS, Anda dapat membangun ikon garis ubahsuaian untuk elemen antarmuka umum seperti menu hamburger, ikon tiga titik atau ikon cetak (di antara banyak lainnya).

Anda dapat memilih di antara ikon garis tipis atau ikon diisi gelap. Mereka berdua memanfaatkan properti CSS serupa dan Anda bahkan dapat melihat apa itu dengan mengklik ikon apa pun dalam daftar. Anda akan melihat geser sidebar dengan kode HTML dan CSS bersama dengan ikon diperbesar.

Jika Anda melihat ke sudut kanan atas bidang kode Anda akan melihat ikon copy kecil. Klik itu untuk secara otomatis menyalin kode ke clipboard Anda. Oh, dan itu ikon salin? Juga dibangun dengan kode CSS murni Wenting.

Untuk ubah warnanya ikon apa pun, adil temukan warna milik di kelas ikon utama. Memperbarui yang itu warna milik akan mengubah segalanya, juga.

Karena ikon-ikon ini cukup mudah, mereka mungkin tidak akan berfungsi untuk setiap situs web. Tapi ini a alternatif keren untuk font gambar atau ikon dan itu sepenuhnya gratis.

Lihat Halaman depan Ikon CSS untuk lihat lebih banyak contoh dan untuk salin / edit sumbernya. Anda juga bisa uji setiap ikon secara terpisah di CodePen jika Anda mau bermain-main dengan sumbernya di browser Anda.