Front-end Geliştiricilere Sade CSS İkonları
Adobe tasarımcısı olan Wenting Zhang sade CSS ikonları üretmek için ilginç bir web uygulaması oluşturdu. Bu uygulama Front-end Developer için çok kullanışlı olacağını düşünüyorum.
Bu proje tamamen ücretsizdir. GitHub‘da açık kaynak kodlarına erişebilmeniz mümkündür. Kodları indirip projenizde rahatlıkla dahil edebilirsiniz.
Bu ikonlarda CSS bağımlılıkları yoktur. Yani herhangi bir kütüphaneye dahil etmenize gerek yok. Ayrıca özel bir tarayıcı şartı da bulunmaz. İlk bakışta projeler SVG’ler üzerine inşa edilmiş gibi görünse de aslında sadece divl’ler kullanılmaktadır.
Bu projede genel olarak lazım olabilecek ikonları bulabilirsiniz. Proje her geçen gün gelişiyor. Yeni ikonlar gelmeye devam edecektir.
İnce çizgili simgeler veya koyu renkli simgeler arasından seçim yapabilirsiniz. Her ikisi de benzer CSS özelliklerini kullanır ve listede herhangi bir simgeyi tıklatarak ayrıntılı olarak görebilirsiniz. HTML ve CSS kodunun yanı sıra simgenin büyütülmüş olan halini yine yan tarafta göreceksiniz.
Kod alanlarının sağ üst köşesine bakarsanız, küçük bir kopyalama simgesi görürsünüz. Kodu otomatik olarak panonuza kopyalamak için bunu tıklatın.
İkonlar css kodlarıyla oluşturulduğundan renk kodlarını değiştirerek rahatlıkla istediğiniz renge ayarlama yapabilirsiniz.
Sizlere örnek olması amaçlı aldığım bir örnek ikonun simgesini kırmızı yapıyorum. Aşağıdaki Codepen aracıyla HTML ve CSS kodları görebilirsiniz. Bu kodlar içinden sadece CSS kodları içerisinde .menu.icon yazan bölümde color: #000; satırını color: #ff0000; olarak değiştirdim. İstediğim ikonun rengini değiştirerek kullanmış oldum.
Bu ikonlar her web sitesinde çalışmayabilir. Ancak resim ve font ikonlarına alternatif olarak kullanılabilir. En önemlisi de ücretsiz oluşudur.
Daha fazla örneğe ve kaynak kodlarına ulaşmak için CSS ikonlarının web sitesine bakın. Kodları değiştirebilmek için Try it codepen diyerek tarayıcı üzerinden test edebilirsiniz.
Bu makalede Front-end Developer için CSS ikonları uygulamasından bahsettik. Bu konu hakkındaki düşüncelerinizi yorum yaparak bizlerle paylaşabilirsiniz.
