Makale Başlıkları
Kısaca
Font Awesome, web sitelerinde ve uygulamalarda kullanılan ikonları font ve SVG olarak sunan, dünyada en yaygın kullanılan ikon kütüphanesidir. En hızlı başlangıç yöntemi, kendi sitenize özel bir Kit oluşturup tek satırlık script etiketiyle eklemektir. İkonlar vektörel olduğu için her ölçekte net görünür ve CSS ile renk, boyut, gölge gibi tüm özelliklerini kolayca değiştirebilirsiniz.
- Güncel sürüm Font Awesome 7; ücretsiz pakette 2.150’den fazla, Pro pakette 65.000’den fazla ikon var.
- Kurulum için üç yol vardır: Kit (önerilen), CDN bağlantısı veya dosyaları indirip kendi sunucunuza yükleme.
- WordPress kullanıyorsanız resmi Font Awesome eklentisiyle tek tıkla kurabilirsiniz.
Font Awesome, web sitelerinde ve uygulamalarda kullandığımız menü, buton, başlık ve liste ikonlarını hem font hem de SVG biçiminde sunan, açık kaynaklı ve ücretsiz bir ikon kütüphanesidir. İlk olarak 2012’de yalnızca web siteleri için yayınlanan Font Awesome bugün o kadar yaygınlaştı ki sadece web’de değil; Android, iOS, masaüstü uygulamaları ve hatta oyun arayüzlerinde bile karşınıza çıkar. Bu rehberde Font Awesome’ın ne olduğunu, neden tercih edildiğini ve 2026 itibarıyla güncel sürümüyle adım adım nasıl kurulup kullanıldığını somut kod örnekleriyle anlatıyoruz.
Font Awesome’ın en büyük avantajı, ikonların vektörel olmasıdır. Yani bir PNG gibi belirli bir çözünürlüğe bağlı değildir; 12 piksellik bir menü ikonu da 200 piksellik bir hero görseli de aynı netlikte görünür. Sitenizi Font Awesome’a bağladığınızda, basit bir HTML etiketiyle (örneğin <i class="fa-solid fa-user"></i>) istediğiniz ikona anında erişebilirsiniz.
Font Awesome 7: Güncel Sürüm ve İçerik
Font Awesome sürekli geliştirilen bir projedir. 2026 itibarıyla güncel ana sürüm Font Awesome 7‘dir ve önceki sürümlere göre önemli yenilikler getirir:
- İkon sayısı: Ücretsiz pakette 2.150’den fazla, Pro pakette 65.000’in üzerinde ikon bulunur.
- Yeni stiller: Klasik (Classic), Sharp (keskin köşe), Duotone (çift renkli) ve Sharp Duotone gibi farklı stillere aynı ikon için geçiş yapabilirsiniz.
- Daha hafif teslimat: Font Awesome 7, eski
.ttfve.woffdosyalarını bıraktı; artık standart web fontu biçimi yalnızca.woff2‘dir. Bu, daha küçük dosya boyutu ve daha hızlı yükleme demektir. - SVG performansı: SVG + JavaScript modunda pseudo-element işleme performansı ciddi ölçüde iyileştirildi.
Eski yazıların çoğunda geçen Font Awesome 4.7 sürümü (örneğin fa fa-user biçimindeki sınıf adları) hâlâ çalışır, ancak artık geliştirilmemektedir. Yeni bir projeye başlıyorsanız doğrudan Font Awesome 6 veya 7 ile başlamanızı öneririz; sınıf adlandırması (fa-solid, fa-regular gibi) ve ikon kapsamı ciddi şekilde farklıdır.
Sürümler arası sınıf farkı
| Özellik | Font Awesome 4 (eski) | Font Awesome 5 / 6 / 7 (güncel) |
|---|---|---|
| Temel sınıf | fa |
fa-solid, fa-regular, fa-brands |
| Örnek | fa fa-user |
fa-solid fa-user |
| Stil seçeneği | Tek stil | Solid, Regular, Light, Thin, Duotone, Sharp |
| Teslimat | .woff / .ttf | .woff2 (font) veya SVG + JS |
| Marka ikonları | fa fa-facebook |
fa-brands fa-facebook |
Font Awesome’ın Avantajları Nelerdir?
Çevrim içi sunulan birçok ikon paketindeki en yaygın sorun, yalnızca belirli boyutlarda iyi görünmeleridir. Font Awesome ikonları farklıdır: her yerde çalışır ve seçtiğiniz boyut ne olursa olsun keskin görünür. İkon eklemek için artık .png uzantılı görseller aramanıza gerek yoktur; tek bir HTML etiketi yeterlidir.
- Ücretsiz pakette 2.150’den fazla, Pro pakette 65.000’in üzerinde ikon.
- Tüm ikonlar vektörel; ölçekleme bir sorun değil, her boyutta kullanabilirsiniz.
- Renk, boyut, gölge, dönme ve animasyonu tamamen CSS ile kontrol edersiniz.
- Tutarlı tasarım dili sayesinde tüm ikonlar birbiriyle uyumlu görünür.
- Öğrenme eğrisi çok düşüktür; bir HTML satırını bilen herkes kullanabilir.
- PNG görsellere göre çok daha hızlı yüklenir ve sayfa ağırlığını düşürür.
Font Awesome Nasıl Kullanılır? Üç Kurulum Yöntemi
Font Awesome’ı projenize eklemenin üç temel yolu vardır. Hangisini seçtiğiniz; teknik bilginize, performans ihtiyacınıza ve ikonları ne sıklıkta güncellemek istediğinize göre değişir.
1) Kit ile (en hızlı ve önerilen yöntem)
Kit, yalnızca ihtiyacınız olan ikonları, ayarları ve stilleri içeren, size özel bir Font Awesome sürümüdür. Önce fontawesome.com üzerinden ücretsiz bir hesap oluşturursunuz; size özel bir kit kodu üretilir. Bu kodu sitenizin <head> bölümüne eklemeniz yeterlidir:
<script src="https://kit.fontawesome.com/SIZIN-KODUNUZ.js" crossorigin="anonymous"></script>
Kit’in en büyük avantajı, ayarları panelden değiştirebilmenizdir: web fontu ile SVG arasında geçiş yapabilir, otomatik güncellemeleri açabilir ve yalnızca kullandığınız ikonları yükleyerek dosya boyutunu küçültebilirsiniz. Eklemeden sonra herhangi bir ikonu şu şekilde çağırırsınız:
<i class="fa-solid fa-house"></i>
2) CDN bağlantısı ile
Hesap oluşturmak istemiyorsanız, ücretsiz sürümü doğrudan bir CDN’den de çekebilirsiniz. <head> içine aşağıdaki CSS bağlantısını eklemeniz yeterlidir (sürüm numarasını güncel tutun):
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
Ardından aynı HTML etiketiyle ikonları kullanabilirsiniz. Bu yöntem hızlı başlangıç için idealdir; ancak Kit’in sunduğu ikon optimizasyonu ve panel ayarlarından yararlanamazsınız.
3) Dosyaları indirip kendi sunucunuza yükleyerek
Tam kontrol isteyen veya internet bağlantısına bağımlı olmadan çalışması gereken projeler için Font Awesome dosyalarını indirip kendi sunucunuza yükleyebilirsiniz. İndirdiğiniz arşivdeki css ve webfonts klasörlerini projenize kopyalar, ardından all.css dosyasını bağlarsınız:
<link rel="stylesheet" href="/fontawesome/css/all.min.css">
Bu yöntemde tüm ikon dosyaları sizin barındırma alanınızda durduğu için, sitenizin hızlı ve güvenilir bir hosting altyapısında olması önemlidir. Sayfanın ilk açılış hızını doğrudan etkileyen bu statik dosyaların, düşük gecikmeli ve önbellek dostu bir sunucuda barınması gerekir. Bu noktada hızlı hosting altyapısı devreye girer: LiteSpeed ve LSCache gibi önbellekleme çözümleri, font ve CSS dosyalarının ziyaretçiye en kısa sürede ulaşmasını sağlar.
Web Fontu mu SVG mi? Hangisini Seçmeli?
Font Awesome ikonları iki teknik yöntemle ekrana gelir ve doğru seçim projenize göre değişir:
| Kriter | Web Fontu (Webfont + CSS) | SVG + JavaScript |
|---|---|---|
| Çalışma şekli | İkonlar bir font dosyasında; CSS ile gösterilir | Her ikon ayrı bir SVG; JS ile sayfaya işlenir |
| CSS pseudo-element (::before) | Çok iyi çalışır | Sınırlı; JS taraması gerekir |
| Tekil ikon kontrolü | Sınırlı | Çok esnek (katman, maske, animasyon) |
| Çok sayıda dinamik ikon | Daha akıcı | Çok element varsa yavaşlayabilir |
| İdeal kullanım | Menü, liste, genel arayüz | Karmaşık, özel veya katmanlı ikonlar |
Pratikte çoğu site için web fontu yöntemi yeterli ve daha hızlıdır. İkonlar üzerinde gelişmiş katmanlama veya maske gibi işlemler yapacaksanız SVG modunu tercih edebilirsiniz. Kit kullanıyorsanız iki yöntem arasında panelden tek tıkla geçiş yapabilirsiniz.
İkon Boyutunu, Rengini ve Stilini Ayarlama
Font Awesome’ın gücü, ikonları normal metin gibi davranmasıdır. Renk ve boyut, içinde bulunduğu metnin color ve font-size değerlerinden gelir. Ek olarak hazır yardımcı sınıflar da vardır:
- Boyut:
fa-xs,fa-sm,fa-lg,fa-2x…fa-10x - Sabit genişlik:
fa-fw(menülerde ikonları hizalamak için) - Dönme/çevirme:
fa-rotate-90,fa-flip-horizontal - Animasyon:
fa-spin(döndürme),fa-beat,fa-fade
Örnek olarak büyük, mavi, dönen bir ayar ikonu şu şekilde tanımlanır:
<i class="fa-solid fa-gear fa-2x fa-spin" style="color:#1565c0"></i>
WordPress’te Font Awesome Nasıl Kurulur?
WordPress sitenize Font Awesome eklemenin en kolay yolu, resmi Font Awesome eklentisidir. Eklentiyi kurup etkinleştirdikten sonra, bir Kit kodu girerek tüm siteye güncel ikonları yüklersiniz; manuel kod düzenlemesine gerek kalmaz. Eklenti, sürüm yönetimini ve performans ayarlarını da panelden yapmanıza olanak tanır.
Tema veya eklenti dosyalarına dokunmak istemiyorsanız, alternatif olarak temanızın header.php dosyasına ya da bir “özel HTML” alanına Kit script etiketini elle ekleyebilirsiniz. Ancak resmi eklenti, tema güncellemelerinde kodunuzun kaybolmasını önlediği için daha güvenli bir seçimdir. WordPress sitenizin sorunsuz çalışması için WordPress hosting gibi bu altyapıya optimize edilmiş bir paket seçmek, eklenti ve font yüklerinin performansa yansımasını en aza indirir.
Font Awesome Free mi Pro mu? Hangisi Size Uygun?
Çoğu web sitesi için ücretsiz sürüm fazlasıyla yeterlidir; 2.150’den fazla ikon, standart bir kurumsal site, blog veya küçük e-ticaret için gereken tüm temel sembolleri kapsar. Pro sürümü ise aşağıdaki durumlarda anlam kazanır:
| İhtiyaç | Free | Pro |
|---|---|---|
| İkon sayısı | 2.150+ | 65.000+ |
| Stil çeşidi (Light, Thin, Duotone, Sharp) | Sınırlı | Tam erişim |
| Kendi özel ikonlarınızı yükleme | Hayır | Evet |
| Büyük e-ticaret / kurumsal projeler | Yeterli olabilir | Önerilir |
| Maliyet | Ücretsiz | Yıllık abonelik |
Özetle: standart bir WordPress blogu veya kurumsal site işletiyorsanız ücretsiz sürüm ihtiyaçlarınızın neredeyse tamamını karşılar. Çok özel ikonlara, ek stillere veya kendi marka ikonlarınızı kütüphaneye eklemeye ihtiyacınız varsa Pro’ya geçmek mantıklıdır.
Yaygın Hatalar ve Çözümleri
- İkon görünmüyor, boş kare çıkıyor: Genellikle yanlış sınıf adı (örneğin FA6’da
fayerinefa-solidkullanmamak) veya yüklenmemiş stil dosyasından kaynaklanır. Tarayıcının geliştirici araçlarıyla CSS dosyasının yüklenip yüklenmediğini kontrol edin. - Marka ikonu çalışmıyor: Facebook, X, Instagram gibi marka ikonları
fa-brandssınıfını gerektirir,fa-soliddeğil. - Pro ikonu ücretsiz sürümde görünmüyor: Seçtiğiniz ikon Pro’ya özelse, ücretsiz pakette boş görünür. İkon arama sayfasında “Free” filtresini kullanın.
- CORS / kit hatası: Kit script etiketinde
crossorigin="anonymous"özelliğinin eksik olmamasına dikkat edin.
Sıkça Sorulan Sorular
Font Awesome nedir?
Font Awesome, web sitelerinde ve uygulamalarda kullanılan menü, buton ve liste ikonlarını hem font hem de SVG biçiminde sunan, açık kaynaklı ve ücretsiz bir ikon kütüphanesidir. İkonlar vektörel olduğu için her ölçekte net görünür ve CSS ile renk, boyut ve animasyonları kolayca değiştirilebilir.
Font Awesome ücretsiz mi?
Evet, Font Awesome’ın ücretsiz bir sürümü vardır ve 2.150’den fazla ikon içerir. Bu paket çoğu kurumsal site, blog ve küçük e-ticaret için yeterlidir. Daha fazla ikon, ek stiller ve kendi özel ikonlarınızı yükleme imkanı için ücretli Pro sürümü sunulur.
Font Awesome’ın güncel sürümü hangisi ve kaç ikon içeriyor?
2026 itibarıyla güncel ana sürüm Font Awesome 7’dir. Ücretsiz pakette 2.150’den fazla, Pro pakette ise 65.000’in üzerinde ikon bulunur. Font Awesome 7 ayrıca yalnızca .woff2 fontu kullanarak daha hafif teslimat ve gelişmiş SVG performansı sunar.
Font Awesome nasıl kurulur?
Üç temel yol vardır: site için özel bir Kit oluşturup tek satırlık script etiketini eklemek (önerilen), bir CDN bağlantısını head bölümüne koymak veya dosyaları indirip kendi sunucunuza yükleyip all.css dosyasını bağlamak. Kit yöntemi panelden ikon ve performans ayarına izin verdiği için en pratik olanıdır.
Font Awesome WordPress’e nasıl eklenir?
En kolay yol resmi Font Awesome eklentisini kurup etkinleştirmek ve bir Kit kodu girmektir; böylece tema dosyalarına dokunmadan tüm siteye güncel ikonlar yüklenir. Alternatif olarak Kit script etiketini temanızın header.php dosyasına elle ekleyebilirsiniz.
Web fontu mu yoksa SVG yöntemi mi kullanmalıyım?
Çoğu site için web fontu yöntemi yeterli ve daha hızlıdır; CSS pseudo-element ile çok iyi çalışır. İkonlar üzerinde katmanlama, maske veya gelişmiş animasyon yapacaksanız SVG + JavaScript yöntemi daha esnektir. Kit kullanıyorsanız iki yöntem arasında panelden geçiş yapabilirsiniz.
Font Awesome 4 ile 6/7 arasındaki fark nedir?
En belirgin fark sınıf adlandırmasıdır: Font Awesome 4’te tek bir fa sınıfı (örneğin fa fa-user) kullanılırken, 5/6/7 sürümlerinde stile göre fa-solid, fa-regular veya fa-brands gibi sınıflar kullanılır. Yeni sürümlerde ikon sayısı, stil çeşidi ve performans çok daha iyidir.
İkon görünmüyor, ne yapmalıyım?
En sık nedenler yanlış sınıf adı (FA6/7’de fa yerine fa-solid kullanmamak), yüklenmemiş CSS dosyası veya marka ikonunda fa-brands sınıfını unutmaktır. Tarayıcının geliştirici araçlarıyla stil dosyasının yüklendiğini doğrulayın ve ikonun ücretsiz pakette yer alıp almadığını kontrol edin.
İkon boyutunu ve rengini nasıl değiştiririm?
Renk ve boyut, ikonun içinde bulunduğu metnin color ve font-size değerlerinden gelir. Ayrıca fa-2x, fa-lg gibi hazır boyut sınıfları ve fa-spin gibi animasyon sınıfları da kullanabilirsiniz. Örneğin style=”color:#1565c0″ ile rengi, fa-2x ile boyutu değiştirebilirsiniz.
Sitenizi hızlı bir altyapıda yayınlayın
Font Awesome ikonlarının ve tüm statik dosyalarınızın saniyenin altında yüklenmesi için LiteSpeed ve LSCache destekli, İzmir’deki kendi veri merkezimizde barınan hosting paketlerimizi inceleyin. Ücretsiz SSL, ücretsiz taşıma ve 7/24 Türkçe destek dahildir.
