Yücel Alkan

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.

04.01.2019
11538
Yorumlar
Mustafa (08 Ocak 2020 - 00:05)
Teşekkür ederim paylaşım için. Sitemi çok şık hale getirdi.
Cevapla
Yorum Yapın