Saf CSS İkonlarının Bu Galerisi Tüm Öncü Geliştiricilerin İstediğidir

Adobe tasarımcı Wenting Zhang bir yarattı ilginç web uygulaması için saf CSS simgeleri üretmek. Bu sadece adlandırılmış “CSS Simgesi” ve en havalı biri olabilir simge jeneratörleri Frontend geliştiricileri için.

Bu proje Tamamen bedava ve GitHub'ta açık kaynaklı kodların herhangi birini indirmekte ve karıştırmakta özgürsünüz..

Bu simgeler CSS bağımlılığı yok veya herhangi bir özel tarayıcı özelliğine ihtiyacınız var. İlk bakışta, simgeler SVG'ler üzerine kurulmuş gibi görünebilir ama onlar aslında sadece divs.

CSS'nin sihri ile inşa edebilirsiniz özel hat simgeleri için ortak arayüz elemanları Hamburger menüsü, üç noktalı simge veya yazdırma simgesi (diğerleri arasında) gibi.

Arasında seçim yapabilirsiniz ince çizgi simgeler veya karanlık dolu simgeler. Her ikisi de kullanır benzer CSS özellikleri ve listedeki herhangi bir simgeye tıklayarak ne olduklarını bile görebilirsiniz. Göreceksin sürgülü kenar çubuğu büyütülmüş simge ile birlikte HTML ve CSS kodu ile.

Kod alanlarının sağ üst köşesine bakarsanız, bir küçük kopya simgesi. Tıklayın kodu otomatik olarak kopyala panoya. Oh, ve o kopya simgesi? Ayrıca Wenting'in saf CSS kodu ile oluşturulmuş.

için rengini değiştir Herhangi bir simgenin sadece bul renk özellik ana simge sınıfında. Bunu güncelleme renk özellik her şeyi de değiştirecek.

Bu simgeler gayet basit, Muhtemelen her web sitesi için işe yaramazlar. Ama bu bir Resimlere veya simge yazı tiplerine harika bir alternatif ve Onun Tamamen bedava.

Kontrol et CSS Simgesi ana sayfası için daha fazla örnek gör ve için kaynağı kopyala / düzenle. Ayrıca her simgeyi ayrı ayrı test edin isterseniz CodePen’de kaynak ile etrafında oyuncak tarayıcınızda.