İ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/
Cemelma'dan küçük hatırlatmalar 