Font Awesome ve Diğer İkon Fontları

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-face yö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

Daha sonra dosyaların yapısı aşağıdaki gibi olduğunu göreceksiniz;

Font Awesome ve Diğer İkon Fontları

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>

Font Awesome ile yaptığım örneklere aşağıdaki linkten bakabilirsiniz;

http://www.erbilen.net/demo/font-awesome/index.html

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;

Yayınlayan

Tayfun Erbilen

2009’dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“Font Awesome ve Diğer İkon Fontları” üzerine 14 yorum

  1. Tamam bundan sonra hiç resim olmayan mükemmel bir tasarım yapmaya başlıyorum. ^^

  2. Ellerine sağlık bir çok dersine göz attım çok güzel çalışmalar. CSS konusunda daha fazla ders bekliyoruz. Zira sayfada baktığımda 10 – 15 tane ders var ve bunları bitirdim sanki eskiden daha fazla ders vardı. Tekrar eline sağlık başarıların devamını dilerim.

  3. Merhabalar,
    fontello kullanan bir temam var. Normalde temada kullanılan iconlarda fontawesome mantıgı gibi.
    Fakat hiç bir dosya ve kod betiklerinde bir sıkıntı yokken
    temanın üstündeki iconlar şöyle olması gerekirken ( http://i.imgur.com/XWs3D8B.png )
    ne yazııki bende böyle görünüyor ( http://img855.imageshack.us/img855/8924/tvf1.png )
    Sonuç olarak iconlar boş kare olarak görünüyor.
    Yardımcı olursan gerçekten minettar kalırım.

    Teşekkürler.

    1. Js ve css dosyalarınızın site içerisindeki bağlantılarını kontrol ediniz dosyalarınızda sorun olmayabilir ancak sitenize css ve js dosyalarınızı tanıtırken bir hata yapmışsınız gibi görünüyor.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir