FONTAWESOME 4 İKON KULLANIMI

Merhaab..

Web sayfalarında ikonları kullanarak , daha şık , anlaşılır  görünümler elde edebiliriz. Hali hazırda  web için bir çok ikon eklentisi kullanılıyor. En çok kullanılanlardan biri olan FONTAWESOME font kütüphanesine bakalım... 

FONTAWESOME 4

 Fontawesome 4 biraz eskide olsa hala güzel ve sade ikonları var. Fontawesome  ikonlarını kullanabilmek için öncelikle kendi CSS kütüphanesini sayfamıza çağırmamız gerekiyor... 

FONTAWESOME 4 BAĞLANTISI

Fontawesome ikon kütüphanesini kullanabilmek için öncelikle css dosyasının sayfaya eklenmesi gerekiyor. Dosyayı indirmeden doğrudan aşağıdaki gibi , head etiketleri içerisinde , CDN ile çağırabiliriz.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

KULLANIMI

Fontawesome ikonlarını sayfaya ekleyebilmek için ise genellikle "i" yada "span" etiketlerinden yararlanıyoruz. i etiketine "fa" sınıfını (class) verdikten sonra yanına hangi ikonu kullanmak istiyorsak , onun sınıfınıda (örneğin fa-chrome) ekliyoruz.

<i class="fa fa-chrome"></i>
<i class="fa fa-instagram "></i>

Daha büyük ikonlar kullanmak için fa-lg , fa-2x, fa-3x, fa-4x, fa-5x classları kullanılabilir.

<i class="fa fa-chrome fa-3x"></i>
<i class="fa fa-instagram  fa-3x"></i>

Fontawesome 4 ve 5 kütüphanelerinin daha detaylı kullanım örnekleri için w3school ikon sayfalarını inceleyebilirsiniz.

W3 Fontawesome 4 W3 Fontawesome 5 Fontawesome.com