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

CSS'in ve internet tarayıcılarının gelişmesiyle birlikte grafik kullanımını en aza indirmek için çeşitli yöntemler geliştirilmiştir. Bu yöntemlerden birisi de CSS desteği ile sunulan fontların kullanılmasıdır

Ç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
Web Sitelerinde İkon Fontlar (Font Awesome) Kullanımı
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
<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ü
Web Sitelerinde İkon Fontlar (Font Awesome) Kullanı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.
Örnek
Web Sitelerinde İkon Fontlar (Font Awesome) Kullanımı

Yorumlar

Henüz hiçbir yorum yazılmamış. İlk yorumu siz yapın.

Yorum Yaz

Avatar

REKLAM

DDos Koruma, Botnet Koruma, Layer 7 Saldırı koruması, Sanal sunucu, Vds sunucu

REKLAM

Çizgi Filmler

EN

  • Popüler
  • Yeni
  • Son Yorum