Home
Boostrap
Ders

Font Awesome ve Bootstrap Rehberi

Dynexplorer

Font Awesome Nedir?

Font Awesome, web projelerinde ikonları kolayca kullanmanızı sağlayan popüler bir kütüphanedir. İkonları boyutlandırabilir, renklendirebilir ve istediğiniz şekilde özelleştirebilirsiniz.

Font Awesome Nasıl Eklenir?

Font Awesome'ı projeye dahil etmenin yolları:

  1. CDN ile Kullanım: 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  2. Yerel Kullanım: İndirdiğiniz dosyaları projeye ekleyin. Örnek: 
    <link rel="stylesheet" href="css/all.min.css">

Font Awesome İkonları Nasıl Kullanılır?

İkonları kullanmak için aşağıdaki gibi sınıflar ekleyebilirsiniz:

<i class="fas fa-camera"></i>

Bu kod bir kamera ikonu gösterir:

Örnek İkonlar

En sık kullanılan ikonlar:

  1. <i class="fas fa-heart"></i> → Kalp
  2. <i class="fas fa-user"></i> → Kullanıcı
  3. <i class="fas fa-envelope"></i> → Zarf

Bootstrap Nedir?

Bootstrap, modern web tasarımları oluşturmayı kolaylaştıran bir CSS ve JavaScript çerçevesidir. Responsive (mobil uyumlu) tasarımlar yapmak için çok kullanışlıdır.

Bootstrap Nasıl Eklenir?

Bootstrap'ı projeye dahil etmek için aşağıdaki yöntemlerden birini kullanabilirsiniz:

  1. CDN ile Kullanım: 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  2. Yerel Kullanım: Bootstrap dosyalarını indirerek kullanabilirsiniz. 
    <link rel="stylesheet" href="css/bootstrap.min.css">

Font Awesome ve Bootstrap Kullanımı Örnekleri

Aşağıda iki kütüphaneyi birlikte kullanarak yapılmış bir örnek:

<div class="container text-center">

    <button class="btn btn-primary">

        <i class="fas fa-thumbs-up"></i> Beğen

    </button>

    <button class="btn btn-danger">

        <i class="fas fa-trash"></i> Sil

    </button>

</div>

Font Awesome İkonlarının Önizlemesi

Aşağıda bazı yaygın Font Awesome ikonları ve önizlemeleri gösterilmektedir:

  1. <i class="fas fa-camera"></i> → Kamera İkonu:
  2. <i class="fas fa-heart"></i> → Kalp İkonu:
  3. <i class="fas fa-user"></i> → Kullanıcı İkonu:
  4. <i class="fas fa-envelope"></i> → E-posta İkonu:
  5. <i class="fas fa-search"></i> → Arama İkonu:
  6. <i class="fas fa-shopping-cart"></i> → Alışveriş Sepeti:

Font Awesome Sınıflarını Anlamak

Font Awesome'daki sınıflar ikonları özelleştirmenize olanak tanır. Örnek sınıflar:

  1. fas: Solid (dolu) stilindeki ikonları temsil eder.
  2. far: Regular (boş) stilindeki ikonları temsil eder.
  3. fab: Brand (marka) ikonları için kullanılır (örneğin Facebook, Twitter).
  4. fa-lg, fa-2x, fa-3x: İkon boyutunu büyütmek için kullanılır.

Örnek:

<i class="fas fa-home fa-3x"></i>

Sonuç:

SVG ve Font İkon Arasındaki Fark

İkonları iki temel şekilde kullanabilirsiniz: SVG (Scalable Vector Graphics) ve Font İkonlar.

  1. SVG İkonlar:
    • Daha esnek ve keskin bir kalite sunar.
    • Herhangi bir çözünürlükte mükemmel görünür.
    • Doğrudan HTML içine eklenebilir ve CSS ile özelleştirilebilir.

    Örnek SVG kodu:

    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M12 0L10.59 1.41 17.17 8H0v2h17.17l-6.58 6.59L12 16l8-8z"/>
</svg>
  2. Font İkonlar:
    • Kütüphane üzerinden sınıf tabanlı bir yapı ile çalışır.
    • CSS ile kolayca renklendirilebilir ve boyutlandırılabilir.
    • Boyut ve renk gibi özellikler direkt CSS ile kontrol edilir.

    Örnek Font Awesome kodu:

    <i class="fas fa-arrow-right"></i>

Font Awesome ve Bootstrap Karşılaştırması

Her iki kütüphanenin farklı kullanım alanları vardır:

  1. Font Awesome:
    • Sadece ikonlar üzerine odaklanır.
    • Kapsamlı bir ikon kütüphanesi sunar.
    • SVG ve font tabanlı ikonlar arasında seçim yapabilirsiniz.
  2. Bootstrap:
    • Responsive (mobil uyumlu) tasarımlar için bir framework sağlar.
    • Düğmeler, kartlar, modal pencereler ve daha fazlası gibi önceden tanımlı bileşenler sunar.
    • İkonları entegre etmek için genellikle Font Awesome gibi ek kütüphaneler kullanılır.

İkonlara Renk ve Href Ekleme

Font Awesome ikonlarını stillendirmek ve tıklanabilir hale getirmek için şu adımları izleyebilirsiniz:

  1. Renk Verme:

    İkona doğrudan inline stil ile renk ekleyebilirsiniz:

    <i class="fas fa-star" style="color: gold;"></i>

    Sonuç:

  2. Href (Bağlantı) Ekleme:

    İkonları bağlantı haline getirmek için `` etiketi kullanabilirsiniz:

    <a href="https://example.com" target="_blank">
    <i class="fas fa-link" style="color: blue;"></i>
</a>

    Sonuç:

Font Awesome ve Bootstrap ile Örnek Tasarım

Aşağıda her iki kütüphaneyi birlikte kullanarak yapılmış bir tasarım bulunmaktadır:

<div class="container text-center my-4">
    <button class="btn btn-success">
        <i class="fas fa-check"></i> Onayla
    </button>
    <a href="https://example.com" target="_blank" class="btn btn-info">
        <i class="fas fa-info-circle"></i> Detaylar
    </a>
</div>

Sonuç:

Detaylar

Post a Comment