Ç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
[Genel anlamda yaptığım çalışmalarda css ve fonts klasörleri yeterli olmaktadır.
Şimdi ise boş bir html sayfa oluşturup CSS'i sayfamıza dahil edelim.
Head Etiketleri Arasında CSS Dahil Ediliyor
Sayfamıza CSS'i dahil ettik, kütüphanedeki sınıfları çağıralım (class).
Birkaç Örnek
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
"İndirme Bağlantısı" aşağıda verilmiştir. İndirip daha detaylı bir şekilde inceleyebilirsiniz.
Örnek
Detaylar ve indirme Bağlantısı: Web Sitelerinde İkon Fontlar (Font Awesome) Kullanımı