İcon Font /Font Awesome nedir?

İkon Fontları Nedir?
Özel olarak font kullanmak istediğimizde bildiğiniz gibi @font-face yöntemini kullanıyoruz.

Font Awesome
İkon Fontlar arasında en çok kullanılanlardan birisi Font Awesome. Github üzerinden yayınlanan, ücretsiz bir ikon font servisi. http://fortawesome.github.io/Font-Awesome/ adresinden download edebilirsiniz.

Eğer Sass ya da Less kullanıyorsanız gerekli dosyalar sass ve less klasörlerinde. Bizim için css ve font klasörlerini almamız yeterli. Daha sonra index sayfamızda çağırmamız gerekenler şöyle;

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

Artık istediğimiz ikonu seçip kullanabiliriz.
Örneğin popüler ikonlardan windows ikonunu kullanalım;

<i class="icon-windows"></i>

İsterseniz başka bir nesne ilede kullanabilirsiniz, span gibi.
Animasyonlu İkonlar: Eğer ikonlara animasyon katmak isterseniz 2. bir sınıf olarak “icon-spin” atamanız gerekir.. Yani;

<i class="icon-windows icon-spin"></i>

İkon’a border eklemek: Yuvarlak şekilde düzgün gözükmesi için önceden tanımlı şu sınıfı verebilirsiniz; “icon-border“.. Yani;

<i class="icon-off icon-border"></i>

İkon Boyutları: İkon boyutlarını font-size ile belirleyebileceğiniz gibi, font awesome’ın önceden tanımlı şu sınıflarını da kullanabilirsiniz;
– icon-large
– icon-2x
– icon-3x
– icon-4x
Örnek bir kullanım;

<i class="icon-camera-retro icon-4x"></i>

İkon Döndürme: Rotated & Flipped

<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical

İncelemek için tıklayınız.
http://fortawesome.github.io/Font-Awesome/icons/

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google fotoğrafı

Google hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s