FontAwesome ile yüzlerce ikon bir arada!

Web tasarımcılar için olmazsa olmaz ürünlerden birisi de ikonlardır. Web sitenin çeşitli yerlerinde ikonlar kullanılır. Her zaman yeteri kadar ikon bulunmayabilir ve her ikon için ayrı resim dosyası çağırmak (tek dosyadan da çağrılmış olsa da ayrı piksel değeri tanımlamak gerekir) oldukça sorunlu bir iştir. FontAwesome geliştiricileri de font-ikon fikri ile bu soruna çözüm olarak kullanımı çok daha basit ikonlar geliştirmişler.

FontAwesome font tanımlayarak ikon kullanmamıza olanak sağlıyor. İçerisinde sembol bulunduran yazı tiplerinden farklı olarak web siteniz içerisinde herhangi bir karakter girmeniz gerekmiyor. Kullanacağınız bir font sayesinde yüzlerce ikonu zahmetsizce kullanabiliyorsunuz. Bunun yanında CSS kodları ile de istediğiniz şekilde kullanabiliyorsunuz. Göze çarpan önemli özelliklerini şu şekilde sıralayabiliriz:

  • Yüzlerce ikon arasından dilediğinizi HTML kodları ile hızlıca kullanabilirsiniz.
  • JavaScript kullanımı gerektirmez.
  • CSS kodları ile ikonlarınızı düzenlemenize olanak sağlar.
  • Retina ekranlarda da kaliteli görüntü elde edilir.

İkonlar nasıl kullanılır?

  1. FontAwesome adresinden gerekli CSS ve font dosyalarını indirin ve bu CSS dosyalarını <head> etiketi içerisinde tanımlayın.
  2. İkon listesinden kullanmak istediğiniz ikonu seçerek görüntülenen HTML kodunu kopyalayın.
  3. HTML kodlarınız arasında ikonunuzu görmek istediğiniz kısıma kopyaladığınız HTML kodunu yapıştırın.
  4. CSS kodlarını kullanarak dilerseniz eklediğiniz ikonun büyüklük, renk, gölge vb. gibi niteliklerini özelleştirebilirsiniz.

Örnek kullanımlara göz atmak isterseniz buradaki adrese bakabilirsiniz.

10.12.2014 Web Tasarım Yorum yapılmamış

, ,

Yorum yapılmamış

Yorum Yazın

kod.gen.tr