Font Awesome ve Diğer İkon Fontları

Font Awesome için, ikon fontları arasında en çok kullanılanı diyebiliriz. Bootstrap‘ta bir süre font awesome kullanarak bu popüleriteyi arttırdı sanıyorum. Ancak şuanda kullandıkları (yanılmıyorsam) sadece Glyphicons. Bu yazımda bunlardan da bahsedeceğim sizlere.

İkon Fontları Nedir?

Özel olarak font kullanmak istediğimizde bildiğiniz gibi @font-faceyöntemini kullanıyoruz. Bu arkadaşlarda ikonları bir font haline getirmiş ve bize font şeklinde ikonları kullanma imkanı sunuyorlar. Oldukça kullanışlı değil mi?

Font Awesome

Yazı başında da söylediğim gibi, bana kalırsa en yaygın kullanılan ikon fontlarından bir tanesi. Github üzerinden yayınlanan, ücretsiz bir ikon font servisi.

Nasıl Kullanılır?

İlk olarak aşağıdaki bağlantıdan dosyalarını indirin;
http://fortawesome.github.io/Font-Awesome/assets/font-awesome.zip

Eğer Sass ya da Less kullanıyorsanız gerekli dosyalar sass ve less klasörlerinde. Biz normal olanı kullanacağımız için css ve font klasörlerini almamız yeterli. Daha sonra index sayfamızda çağırmamız gerekenler şöyle;

<!-- gerekli dosyalar -->
<link rel="stylesheet" href="css/font-awesome.min.css" />
<!-- ie7 fix -->
<link rel="stylesheet" href="css/font-awesome-ie7.min.css" />

Eğer IE7 sizin için önemli değilse, sadece ilk css dosyasını çağırmanız yeterli olacaktır.

Buradan sonra yapmanız gereken ikonları seçip kullanmak.. İkonların tamamına aşağıdaki bağlantıdan ulaşabilirsiniz;
http://fortawesome.github.io/Font-Awesome/icons/

Örneğin popüler ikonlardan windows ikonunu kullanalım;

<i class="icon-windows"></i>

İşte kullanımı bu kadar basit 🙂 İsterseniz başka bir nesne ilede kullanabilirsiniz, örneğin span gibi. Tercih size kalmış, önemli olan sınıf ismini doğru yazmanız.

Animasyonlu İkonlar: Eğer ikonlara animasyon katmak isterseniz 2. bir sınıf olarak “icon-spin” atamanız gerekir.. Yani;

<i class="icon-windows icon-spin"></i>

İkon’a border eklemek: Yuvarlak şekilde düzgün gözükmesi için önceden tanımlı şu sınıfı verebilirsiniz; “icon-border“.. Yani;

<i class="icon-off icon-border"></i>

İkon Boyutları: İkon boyutlarını font-size ile belirleyebileceğiniz gibi, font awesome’ın önceden tanımlı şu sınıflarını da kullanabilirsiniz;
– icon-large
– icon-2x
– icon-3x
– icon-4x

Örnek bir kullanım;

<i class="icon-camera-retro icon-4x"></i>

Diğer İkon Font Siteleri;

Font Awesome hariç birkaç tane daha popüler ikon font sitesi bulunuyor.. Bunlarında çalışma mantığı birbiriyle aynı, kullanımıda aynı şekilde, biraz incelerseniz eminim anlayacaksınızdır;

Bir Cevap Yazın