Font Awesome Nedir? Nasıl Kullanılır?
Web sayfalarında çeşitli ikonları içerisinde bulunduran font awesome kütüphanesi ve kullanımı ile ilgili bilgiler yer alıyor.
Font awesome web sayfası tasarlarken sıklıkla kullanılan ikonları font olarak sunan CSS kütüphanesidir.
Peki ne gerek var kullanmaya derseniz.
Daha önceleri her bir ikonu çeşitli resim editörleri ile tasarlıyorduk.
Kullandığımız ikonlar genellikle standart görünümde ve benzerdi.
Oluşturduğumuz ikonların sayısı fazla olduğundan dolayı her ikon için sunucuya tekrar istek gidiyordu.
Sunucuya tekrar istek gönderilmesi CSS sprite tekniği ile çözüldü.
Resim editörleri ile oluşturmuş olduğumuz ikonları hazırlamak zahmetli ve sürekli benzer işlemlerle uğraşıyorduk.
Ayrıca CSS sprite tekniği uygulasak bile ikonların genişlik ve yüksekliklerini değiştirdiğimizde bozulmalar meydana geliyordu.
İkonun rengini değiştirmek zaman alıyordu.
İşte bu sorunlara çözüm olarak font awesome geliştirildi.
Font awesome kurulumu
Font awesome kurulumu için font awesome dosyalarını https://fontawesome.com sitesinden indirin.
İndirmiş olduğunuz dosya içerisindeki css ve fonts klasörünü çalışma klasörünüze çıkartın.
css klasörü içerisinde font-awesome.css ve font-awesome.min.css dosyaları çıkmaktadır.
font-awesome.min.css dosyası .min ekinden anlaşılacağı üzere minimize edilmiş yani sıkıştırılmış dosyadır ikisini de kullanabilirsiniz.
Çalıştığınız HTML dosyasının <head> </head> etiketleri arasına css dosyasını dahil edin.
<link rel="stylesheet" href="css/font-awesome.css" />Böylece font awesome kurulumu tamamlanmış oldu.
Font awesome nasıl kullanılır?
Font awesome ikonlarını kullanabilmek için kesinlikle fa sınıfını kullanmamız gerekiyor. Eklenmediğinde font awesome düzgün çalışmayacaktır.
<i class="fa fa-user-plus"></i><i class="fa fa-try"></i>Kurulum sırasında “.min” eklemedim çünkü tanımlara sıkıştırılmış dosya içinden bakmak zor olacaktı.
Biraz İngilizce bilginiz varsa CSS dosyası içerisindeki tanımlardan lazım olan ikonu bulabilirsiniz.
İkon bulma işlemi tanımlardan bulmak zahmetli olursa bunu için https://fontawesome.com/icons/ adresinden kullanmak istediğiniz ikonu daha kolay bulabilirsiniz.
Örneğin; Kullanıcı işlemleri yapacaksanız. Arama kutusuna user yazmanız yeterli olacaktır.
İkon boyutunu büyütmek
Font awesome kullanım nedenlerinden birinin de ikonların boyutlarını bozulmadan büyütebildiğimiz olduğunu söylemiştim.
İkonların boyutlarını büyütmek için fa-lg, fa-2x, fa-3x, fa-4x, fa-5x eklememiz yeterli olacaktır.
<i class="fa fa-user-plus fa-3x"></i>İkonu döndürmek
Font awesome kullandığımız ikonlara çeşitli CSS özellikleri uygulayabiliriz.
Örneğin css3 2b dönüşümler yazımdaki döndürme işlemini uygulayabiliriz.
Font awesome ikonlarını döndürmek için
- fa-rotate-90
- fa-rotate-180
- fa-rotate-270
- fa-flip-horizontal
- fa-flip-vertical
değerlerini kullanabilirsiniz.
<i class="fa fa-user-plus fa-3x fa-rotate-90"></i>İkona kenarlık vermek
İkona kenarlık vermek için fa-border sınıfını eklememiz yeterli olacaktır.
<i class="fa fa-try fa-border fa-3x"></i>İkona animasyon eklemek
İkonlara döndürme animasyonu eklemek için fa-spin veya fa-pulse sınıflarından birini eklememiz yeterli olacaktır.
<i class="fa fa-try fa-spin fa-3x"></i>Animasyonlar daha çok sitenin yüklenme aşamasını gösteren ikonlarda kullanılır.
<i class="fa fa-spinner fa-pulse fa-5x"></i>veya
<i class="fa fa-refresh fa-spin fa-5x"></i>Sizde farklı ikonları deneyerek farklı sonuçlar elde edebilirsiniz.
Hayırlı günler dilerim.