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.
CSS Nedir? CSS Kodları ve CSS Dersleri
Cascading Style Sheets'in kısa adı olan CSS, Türkçe'ye basamaklı stil şablonları olarak çevrilebilir. HTML'in yanında metin ve format şekillendirme açısından geniş olanaklar sağlayan bir web teknolojisidir. CSS, HTML nesnelerinin nas...
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 indirmek 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;
Şimdi bu CSS'in çağırıldığı sayfalar içerisinde şeklinde kullandığımızda Facebook'un ikonu çıkacaktır. Eğer ikonları daha büyük olarak kullanmak istiyorsak o halde kod üzerinde 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.
