Font Awesome Kullanımı ( IMG'lerden kurtulun )

Font Awesome, ikon setleri arasında şüphesiz en çok kullanılan ve en popüleri. Bootstrap’in dolaylı olarak da Twitter’in bir süre bu ikon fontlarını kullanması bu popülerliğe ulaştırdı diyebiliriz. GitHub üzerinden yayınlanmaktadır. @font-face yöntemiyle oluşturulduğundan vektörel çizimlere sahip ve retina görünüm sağlıyor, ikonları image şeklinde kullanmaktan çok çok mantıklı ve sağlıklı.

Nasıl Kullanılır?



adresinden indirip kendi sunucunuzdan çağırabilirsiniz fakat GitHub üzerinden yayın yaptığı için ve sunucuları yeterli olduğu için link href ile direk çağırabiliriz.

Direk çağırmak için meta taglarımız arasına ekleyeceğimiz komut:

<link href=”//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css” rel=”stylesheet”>

Kendi arşivimizden çağıracaksak yukarı verdiğim zip’i indirdikten sonra CSS ve FONT klasörlerini almamız yetecektir. İndex sayfasına çağırırken;

<link rel=”stylesheet” href=”css/font-awesome.min.css” />

<link rel=”stylesheet” href=”css/font-awesome-ie7.min.css” /> // İe7 Fix için

bunları kullanıyoruz.

Örnek Kullanım
Font listesinden bakabilirsiniz ben rastgele bir tane çağırdım, bu kadar basit. Sınıfların adını doğru yazmak en önemli olay.

Animasyonlu ikonlar için ise icon-spin atamamız gerekiyor. Örnek olarak;


Yuvarlak görünmesini istiyorsak border atamamız gerekiyor. Örnek;


İkon boyutları ise şu şekilde;

- icon-large
- icon-2x
- icon-3x
- icon-4x

Örnek;