FontAwesome 5.0 üstu Kullanımı

Merhaba, tekrar hoş geldiniz!

Bilgi sahibi olanlarla ihtiyaç duyanları buluşturmak, farklı bakış açılarına sahip insanları bir araya getirerek birbirlerini daha iyi anlamalarını sağlamak ve herkesin bilgisini paylaşmasını sağlamak istiyoruz.

cakal

Yönetici
Katılım
5 Ara 2018
Mesajlar
516
Tepkime puanı
167
Puanları
43
Konum
izmir
fonticon.png


FontAwesome kütüphanesinin yeni sürümüyle  birlikte  sisteme entegre edilişi hakkında bir çok arkadaşımız sorun yaşamaya başladı. Çünkü daha önceden sadece css dosyasını sayfamıza çağırdığımız zaman bir sıkıntı olmadan ikon kütüphanemizi kullanabiliyorduk.

Fakat yeni sürümünde bazı değişiklikler oldu, kütüphaneyi kullanabilmemiz için bazı senaryolara göre hareket etmemiz gerekiyor.

İkonları SVG formatında kullanmak istiyorsak JavaScript dosyasını sayfaya dahil etmeliyiz.

İkonları Web Font formatında kullanmak istiyorsak CSS dosyalarını  sayfaya dahil etmeliyiz. Ayrıca webfonts klasörünü de kopyalamamız gerekiyor yoksa ikonlarımızı görüntüleyemeyiz.

Yeni ikonların class isimlerine baktığımızda bir kaç değişikliğin bizi beklediğini görebilirsiniz. Şimdi bu class isimlerinin ne anlama geldiğini ve nerede kullanacağımızı anlatacağım.

font-Awesome-Prefix.jpg


1. fab => Font Awesome Brands ikon setlerinde kullanılıyor yani şöyle ki markaların ikonlarını kullanırken fab prefixi ile başlamamız gerekiyor.

2. fas veya fa => Font Awesome Solid ikon setlerinde kullanılıyor yani şöyle ki brand (marka) ikonlar için fas veya fa kullanmamız gerekiyor.

3. far => Font Awesome Regular ikon setlerinde kullanılıyor yani şöyle ki eski sürümlerde bazı ikonların sonunda -o eki yapıyorduk, artık -o eki ortadan kalktı onun yerine far prefixini kullanıyoruz.

SVG Kullanımı :

Kod:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>FontAwesome Svg Kullanımı</title>
	<script src="js/fontawesome-all.min.js" defer></script>
</head>
<body>
	<i class="fas fa-user"></i>
	<i class="far fa-user"></i>
</body>
</html>

Web Font Kullanımı :

Kod:
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>FontAwesome WebFont Kullanımı</title>
 <link rel="stylesheet" href="css/fontawesome-all.min.css">
</head>
<body>
 <i class="fas fa-user"></i>
 <i class="far fa-user"></i>
 <i class="fab fa-facebook"></i>
</body>
</html>

Ayrıca tüm ikonları görüntülemek için buraya tıklayınız.

Yeni sürüm ile birlikte bazı ikonların isimleri de değişti, FontAwesome’un ikonların yeni adlarını bulabilirsiniz.
 

Geri
Üst Alt