Font Awesome Nedir? Font Awesome İkonları ve Font Awesome Kullanımı

Font Awesome Nedir? Font Awesome İkonları ve Font Awesome Kullanımı

Font Awesome hemen her türlü web programında ve web sitesi içerisinde kullanılabilen bir ikon font setidir. İçerisinde tüm dünyada tasarımcılar tarafından en çok ihtiyaç duyulan ve kullanılan ikonlarını barındıran Font Awsome’ı CSS’e dahil ederek ikon arama derdine son getirebilir ve meydana getirdiğiniz web siteleri içerisinde CSS yardımıyla anında ikonları belli bir yerde ekrana yazdırabilirsiniz.

Font Awesome İkonları

Font Awesome’un içerisinde şuanda 600’ün üzerinde farklı ikon yer alıyor. Bu ikonları kullanarak istediğiniz elementleri çok daha görsel hale getirmek ve özellikle navigasyon menülerinde fark yaratabilmek mümkün. Font Awesome’un içerisinde yer alan tüm ikonları görmek istiyorsanız buraya tıklayarak ikonları görebilir ve son eklenen ikonlardan daima haberdar olabilirsiniz.

Font Awesome Kullanımı

Font Awesome’un Kullanımı son derece kolaydır. Projelerinizde Font Awesome CSS Toolkit’inden faydalanmak için tek yapmanız gereken şey basit seviyede HTML ve CSS bilgisidir. Temel seviyede tasarım ve HTML & CSS bilgisiyle Font Awesome’u saniyeler içerisinde kullanılmaya hazır hale getirebilirsiniz.

Öncelikle Font Awesome’u İndirmek için buradaki web sitesine giriş yapın ve ardından “Download” Butonuna basın. İndirme işlemi tamamlandığında dosyanın içerisinde 4 farklı klasörün yer aldığını göreceksinizdir. Bunlar; CSS, Font, Less ve Scss’dir.

Biz CSS için olan örnek kullanımı göstereceğiz. Şimdi CSS klasörünü projemizle ilgili dizine yerleştireceğiz ve ardından kullanacağımız sayfada şu şekilde çağıracağız;

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

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

Şimdi bu CSS’in çağırıldığı sayfalar içerisinde <i class=”fa fa-facebook”></i> şeklinde kullandığımızda Facebook’un ikonu çıkacaktır. Eğer ikonları daha büyük olarak kullanmak istiyorsak o halde kod üzerinde  <i class=”icon-facebook icon-4x”>gibi koda icon-sayı değerini vererek ikonu büyütebilir veya küçültebiliriz.

Bir üst başlıkta yer alan Font Awesome İkonları sayfasına giriş yapıp istediğiniz icon’a tıklayarak da icon için class adını alabilir ve yukarıdaki örneklerde olduğu gibi hazır kodunu alıp hemen kullanabilirsiniz.

Bir Yorum Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*