Galeri Ikon CSS Tulen ini Apa yang Semua Pengembang Frontend Ingin

Pereka Adobe Yang Membina Zhang mencipta aplikasi web yang menarik untuk menjana ikon CSS tulen. Ia hanya bernama “Ikon CSS” dan ia mungkin salah satu yang paling keren penjana ikon untuk pemaju frontend.

Projek ini adalah benar-benar percuma dan sumber terbuka pada GitHub jadi anda bebas untuk memuat turun dan kekacauan dengan mana-mana kod.

Ikon ini tidak mempunyai sebarang ketergantungan CSS atau memerlukan sebarang ciri pelayar khas. Pada pandangan pertama, ia mungkin kelihatan seperti ikon dibina di atas SVG tetapi mereka sebenarnya hanya divs.

Melalui keajaiban CSS, anda boleh membina ikon baris tersuai untuk elemen antara muka yang biasa seperti menu hamburger, ikon tiga titik atau ikon cetak (antara yang lain).

Anda boleh memilih antara ikon baris nipis atau ikon yang penuh gelap. Mereka menggunakan kedua-duanya sifat CSS yang serupa dan anda juga dapat melihat apa yang mereka lakukan dengan mengklik mana-mana ikon dalam senarai. Anda akan melihat a gelangsar gelangsar dengan kod HTML dan CSS berserta ikon yang diperbesarkan.

Jika anda melihat ke arah sudut atas sebelah kanan medan kod yang akan anda lihat ikon salinan kecil. Klik itu untuk menyalin kod secara automatik ke clipboard anda. Oh, dan ikon salinan itu? Juga dibina dengan kod CSS tulen Wenting.

Untuk ubah warna daripada mana-mana ikon, hanya cari warna harta dalam kelas ikon utama. Mengemas kini satu itu warna harta akan mengubah segala yang lain juga.

Oleh kerana ikon ini adalah agak mudah, mereka mungkin tidak akan berfungsi untuk setiap laman web. Tetapi ini adalah alternatif sejuk untuk imej atau fon ikon dan ia benar-benar percuma.

Semak Halaman ikon Ikon CSS kepada lihat lebih banyak contoh dan kepada salin / edit sumbernya. Anda juga boleh menguji setiap ikon secara berasingan dalam CodePen jika anda mahu mainan dengan sumbernya dalam penyemak imbas anda.