Html Fa Fa Icon Ekleme

HTML’de Font Awesome İkonları Ekleme: Kapsamlı Bir Kılavuz

Font Awesome, web sitelerine ve uygulamalara kolayca ikon eklemenizi sağlayan popüler bir simge yazı tipidir. Bu kılavuz, HTML’de Font Awesome ikonlarını nasıl ekleyeceğinizi adım adım açıklayacaktır.

1. Font Awesome’u Sayfanıza Ekleyin

Font Awesome’u sayfanıza eklemenin iki yolu vardır:

  • CDN (İçerik Dağıtım Ağı) Kullanma: Bu, Font Awesome’un sunucularından ikonları yüklemenin en kolay yoludur. Aşağıdaki kodu <head> bölümünüze ekleyin:

html
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet">

  • Yerel Dosyaları Kullanma: Font Awesome’un yerel dosyalarını da indirip sunucunuza yükleyebilirsiniz. İndirme sayfasından en son sürümü indirin ve dosyaları sitenizin CSS ve yazı tipi dizinlerine yerleştirin. Ardından, aşağıdaki kodu <head> bölümünüze ekleyin:

html
<link href="/css/font-awesome.min.css" rel="stylesheet">

2. İkon Sınıfını Belirleyin

Font Awesome ikonları, HTML öğelerine eklenen CSS sınıfları kullanılarak eklenir. Her ikonun kendine özgü bir sınıfı vardır. İstediğiniz ikonu bulmak için Font Awesome’un simge galerisini ziyaret edin.

Örneğin, bir ev simgesi eklemek için fa-home sınıfını kullanırsınız.

3. İkonu HTML’ye Ekleyin

İkonu HTML’ye eklemek için bir <i> öğesi kullanın ve class özniteliğine ikon sınıfını ekleyin.

html
<i class="fa-home"></i>

4. İkonu Özelleştirin (İsteğe Bağlı)

İkonları daha da özelleştirmek için aşağıdaki öznitelikleri kullanabilirsiniz:

  • Boyut: fa-xs, fa-sm, fa-lg, fa-2x, fa-3x gibi boyut sınıflarını kullanarak ikonun boyutunu ayarlayın.
  • Renk: fa-primary, fa-secondary, fa-success, fa-danger gibi renk sınıflarını kullanarak ikonun rengini değiştirin.
  • Döndürme: fa-rotate-90, fa-rotate-180, fa-rotate-270 gibi döndürme sınıflarını kullanarak ikonun yönünü değiştirin.
  • Çevirme: fa-flip-horizontal, fa-flip-vertical gibi çevirme sınıflarını kullanarak ikonun yatay veya dikey olarak çevrilmesini sağlayın.

5. Örnekler

İşte bazı Font Awesome ikonlarını kullanma örnekleri:

  • Bir ev simgesi eklemek için:

html
<i class="fa-home fa-2x fa-primary"></i>

  • Bir çöp kutusu simgesi eklemek için:

html
<i class="fa-trash fa-lg fa-danger"></i>

  • Bir sağ ok simgesi eklemek için:

html
<i class="fa-arrow-right fa-rotate-90"></i>

Faydalı Kaynaklar

Yayımlandı

kategorisi