Web Sitelerinde İkon Fontlar (Font Awesome) Kullanımı

Çeşitli sitelerde görüldüğü üzere bazen bir menüde, bazen bir yazının içerisinde şık duran ikonlar görülmektedir. Bu ikonların tarayıcıların da desteğiyle kullanıcılara aktarılmasıyla web sayfasına daha da bir canlılık kazandırılmaktadır. Bu makalemizde Font Awesome kütüphanesini inceleyeceğiz, makaleyi hazırlarken 4.3 versiyonuna ait kütüphane sözkonusu olmuştur. Kendi sayfasından kütüphaneyi indirip, sıkıştırılmış dosyayı açtığımızda şöyle bir klasör yapısı karşımıza çıkmaktadır.
Kütüphanenin içeriği
Şimdi ise boş bir html sayfa oluşturup CSS'i sayfamıza dahil edelim.
Head Etiketleri Arasında CSS Dahil Ediliyor

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

Sayfamıza CSS'i dahil ettik, kütüphanedeki sınıfları çağıralım (class).
Birkaç Örnek

<i class="fa fa-info"></i>
<i class="fa fa-html5"></i>
<i class="fa fa-turkish-lira"></i>

Yaptığımız bu kısa çalışmanın nasıl göründüğüne dair ekranı sizle paylaşalım.
Görünümü


Kütüphanede ayrıca font büyükleri (font-size) konusunda birkaç sınıf (class) bulunmaktadır. Bunları örnek olarak vermek gerekirse "fa-2x", "fa-3x" vs.. şeklindedir.
Font Büyüklükleri

<i class="fa fa-cut fa-2x"></i>
<i class="fa fa-paste fa-3x"></i>
<i class="fa fa-comments fa-4x"></i>
<i class="fa fa-database fa-5x"></i>

"İndirme Bağlantısı" aşağıda verilmiştir. İndirip daha detaylı bir şekilde inceleyebilirsiniz.