FontAwesome Kullanımı
Web sitelerinde daha önce resim olarak eklenen ikonlar zamanla CSS Split metoduyla tek bir dosyadan çağrılmaya başladı. Ancak birçok ikonu tek bir dosyada düzgün bir şekilde toplamak ve tek tek class oluşturup CSS Split yöntemiyle ikonları sayfamıza eklemek de fazla zaman aldığı için farklı yöntemler aranmaya başladı.
FontAwesome gibi servisler ücretsiz veya ücretli olarak bizlere kolayca ikon kullanma yöntemleri sunmaktadır. Fontface yöntemi kullanan bu servisler sayesinde sitemize başta sosyal medya ikonları olmak üzere birçok ikonu kolayca ve zaman harcamadan eklememiz mümkün.
Bu yazımda sizlere Font Awesome tarafından sunulan ücretsiz ikonları websitemize nasıl ekleyeceğimiz anlatacağım. O halde başlayalım.
Fontawesome, Webfont ve SVG olarak iki farklı yapıda ikon kullanmanıza olanak sağlıyor. Ben Webfont olanı kullanacağım.
İlk önce bize verilern css dosyasını sayfamıza ekliyoruz.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
Font Awesome ikonları 4 farklı kategoride sunuyor. Bu kategorileden ikisi ücretsiz iken, diğer ikisi ise ücretli. Kullanacağım kategoriye göre class yapımızı belirleyeceğiz
| Stil | Ücret | Ön ek | Örnek |
| Light | Ücretli | fal | <span class="fal fa-apple"></span> |
| Regular | Ücretli | far | <span class="far fa-apple"></span> |
| Solid | Ücretsiz | fas | <span class="fas fa-apple"></span> |
| Brands | Ücretsiz | fab | <span class="fab fa-apple"></span> |
Tablodan da anlaşılacağı gibi Light (İnce) ve Regular (Normal) kategorisindeki fontlar ücretli. Ancak Solid (Kalın) ve Brands (Logolar) kategorilerindeki fontlar ise ücretsiz.
Eğer Solid kategorisinden bir font kullanacaksanız class ismi belirlerken fas, Brands kategorisinden bir font kullanacaksanız class ismi belirlerken fab ön ekini kullanmanız gerekiyor.Ardından bir boşluk bırakıp sabit olan fa- ekini yazdıktan sonra hangi ikonu kullanacaksanız o ikona ait belirlenen ismi yazmanız gerekiyor. Örneğin; yukarıdaki tabloda ben elma ikonu eklemek istediğim için apple ekini yazdım.
Ayrıca ikonları sadece span elementinde değil tüm elementlerde de kullanmanız mümkün.
Font Awesome tarafından sunulan tüm ikonları görmek için https://fontawesome.com/icons adresini ziyaret edebilirsiniz.
Soru veya görüşlerinizi yorum kısmına yazabilirsiniz.
Hayırlı çalışmalar.
