Web Siteleriniz için Font Icon

Icon Font nedir? – İcon font yada font icon web sitelerinde genelde sosyal medya,yön tuşları gibi bağlantıları görselleştiren ikonların sitede resim olarak değilde font olarak kullanılması ile çıkmış bir tabirdir.Sitenize nasıl ki link sağlayarak -örnek google font cdn- yada @font-face ile font ekliyor iseniz,icon fontları da aynı şekilde ekleyebilirsiniz.

Peki neden icon fontları kullanılmalı derseniz,bunun en önemli iki nedeni var.Birincisi ikon fontlar oldukça esnek bir yapıya sahip oluyorlar.Nasıl ki fontların boyutu,rengi vs özelliklerini rahatlıkla CSS ile değiştiriyorsanız,font ikonlarda aynen CSS ile değiştirilebiliyor.Oysa CSS sprite yöntemi ile yani resim olarak yüklediğiniz ikonların boyutunu,rengi değiştirmek için resim dosyasında değişiklik yapmanız gerekiyor.

Diğer nedeni ise site açılış hızını artırmak.Site açılırken ne kadar resim dosyası varsa o kadar harici istek gönderecek ve site açılış hızını düşürecektir ki bu hiç istenmeyen bir durumdur.Aslında bu neden biraz tartışılabilir.Çünkü sitede az sayıda ikon kullanılacağı zaman CSS sprite metodu bence @font-face yada cdn e göre daha hızlı sonuç verecektir.Özellikle font-face yönteminin ne kadar hantal bir yapı olduğunu düşünecek olursak.

Ama yine de font ikonların avantajları ağır basıyor.Bu yüzden eğer daha önce font ikonları kullanmadıysanız bir sonraki projeniz de kullanmanızı tavsiye ederim.Bu yazımda sizlere font iconları bulabileceğiniz siteleri listeledim.Umarım işinize yarar bir paylaşım olmuştur.

IcoMoon

font-icon-indir-icomoon

IcoMoon binin üzerinde font icon bulacağınız oldukça kullanışlı bir ve popüler bir site.

Fontello

font-icon-indir-fontello

Fontello listedeki bir çok font icon sağlayıcısının iconlarını bünyesinde bulunduruyor.Sadece bir kaç ikon kullanmak istiyorsanız,istediğiniz font ikonu seçerek kullanabilirsiniz.

Fontastic

font-icon-indir-fontastic

Fontastic binlerce iconun bulunduğu benim de projelerimde sık sık yararlandığım bir uygulama.Projeleriniz için özel klasörler açıp sadece gerekli iconları kullanabilirsiniz.

Font Awesome

font-icon-indir-font-awesome

Font Awesome,popüler CSS Framework Bootstrap üzerinden CDN ile kullanılabildiğinden oldukça popüler ve hızlı bir font icon sağlayıcısı.

ionicons

font-icon-indir-ionicons

ionicons, yüzlerce iconu barındıran ister bütün iconları indirip CSS’in @font-face özelliği ile isterseniz CDN üzerinden kullanabileceğiniz tamamen ücretsiz bir font icon sağlayıcıdır.

Octicons

font-icon-indir-octicons

Octicons da içerisinde yüzden fazla iconu barındıran font-face ile kullanabileceğiniz,less ve sass sürümü bulunan bir font icon sağlayıcısıdır.

Typicons

font-icon-indir-typicons

Typicons 300 den fazla vektör icon bulabileceğiniz yine font-face özelliği ile kullanabileceğiniz bir başka font ikon sağlayıcısı.

Entypo

font-icon-indir-entypo

Entypo, iconlarını hem psd,eps formatında indirebileceğiniz hemde font-face ile CSS de kullanabileceğiniz bir font ikon sağlayıcıdır.

Yazı Hakkında

Bu yazıda web projeleri için kullanabileceğiniz küçük görseller yani iconları nereden bulacağınızı anlattım.İconları img şeklinde kulladığı gibi yazı karaketeri yani font olarak da kullanabilirsiniz.İconların yazı olarak HTML dökümanına eklenmesine font icon yada icon font diyoruz.Mevcut liste dışında icon bulabileceğiniz onlarca site mevcut.Fakat bu listedekiler işleriniz için yeterli olacaktır.

Bunları da beğenebilirsin