Font Awesome İkonlarının Kullanma Şekilleri.

Web sayfalarında en yaygın şekilde kullanılan ikon fontlardan biri de Font Awesome dir.  İkonlar font haline dönüştürüldüğü için web sayfalarında yer kaplamadan ve sayfaya fazla yük bindirmeden çalışmaktadır. Üstelik css ile de  şekil verme imkanı mevcuttur.

İkonlar font özelliğinde olduğu ve imaj dosyasına ihtiyaç duymadığı için sitenin hızlı açılmasında büyük rol oynamakatadır.

Font Awesome sayfasına buradan ulaşarak üsteki icons sekmesinden kullanacağımız ikonları seçebiliriz.

Font Awesome iconlarını blogumuza veya web sayfamıza eklemek için head tagları arasına aşağıdaki şekilde link vererek entegre etmeniz gerekmektedir.

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

Buradan sayfamıza yerleştirmek üzere bir ikon seçelim ve üzerine bir sefer tıkladığımızda bu ikonla ilgili kullanım kodu örneğini bu sayfadan kopyalayıp blog sayfamıza veya web sitemize eklediğimizde ikon sayfamızda görünecektir. 

Örnek:

Sayfamıza facebook ikonunu eklemek istediğimizde ikonlar sekmesinden facebook ikonunu bulup üzerine tıkladığımızda açılan sayfadaki aşağıda gösterilen;

<i class="fa fa-facebook" aria-hidden="true"></i>

kodu kopyalayıp body tagları arasına sayfamızın neresinde çıkmasını istiyorsak oraya yapıştırıyoruz.

Font Awesome İkon Boyutları:

Bu kod örneği en küçük boyuttaki ikon örnek kodudur. Eğer farklı boyutta ikon yerleştirmek isterseniz ilgili boyuta ait önceden tanımlanmış aşağıda ki kodları kullanmanız gerekmektedir.

•  Fa-lg
•  Fa-2x
•  Fa-3x
•  Fa-4x
•  Fa-5x

Örnek olarak;

<i class="fa fa-facebook fa-3x"></i>

şeklinde yazabiliriz.

Boyutları, renkleri  css özelliğinden  font-size ve color komutları ile de düzenleyebilirsiniz..

Sabit Genişlikte Kullanım:

Sabit genişlik de simgeleri ayarlamak için fa-fw kullanılır.

Örnek olarak;

<i class="fa fa-facebook fa-fw" aria-hidden="true"></i>

Border Ekleyerek Kullanma:

İkona border eklemek için icon-border kullanılır.

Örnek olarak;

<i class="fa fa-facebook icon border"></i>

İkona Animasyon Ekleyerek Kullanma:

İkonu animasyonlu kullanmak için ikon adından sonra fa-spin  kullanılır.

Örnek Olarak;

<i class="fa fa-facebook fa-spin "></i>

İkonları Döndürülmüş olarak Kullanma:

Bunun için fa-rotate ve fa-flip sınıfları kullanılır.

Örnek Olarak:

90 derece döndürmek için;

<i class="fa fa-facebook fa-rotate-90"></i>

Dikey olarak döndürmek için;

<i class="fa fa-facebook fa-flip-vertical"></i>