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.
Ekleyen
