Bu makalede Bootstrap simgelerini bir web sayfasına nasıl ekleyeceğinizi ve kullanacağınızı öğreneceksiniz.
Bootstrap Simgelerini Kullanma
Bootstrap artık SVG’ler, SVG sprite veya web yazı tipi biçiminde kullanılabilen 1.800’den fazla yüksek kaliteli simge içeriyor. Herhangi bir projede Bootstrap ile veya Bootstrap olmadan kullanabilirsiniz.
Font simgelerini kullanmanın avantajı, yalnızca CSS color özelliğini uygulayarak herhangi bir renkte simgeler oluşturabilmenizdir. Ayrıca, simgelerin boyutunu değiştirmek için CSS font-size özelliğini kullanabilirsiniz.
Şimdi Bootstrap simgelerinin bir web sayfasına nasıl dahil edileceğini ve kullanılacağını görelim.
Bir Web Sayfasına Bootstrap Simgeleri Dahil Etme
Bootstrap simgelerini bir web sayfasına dahil etmenin en basit yolu CDN bağlantısını kullanmaktır. Bu CDN bağlantısı temel olarak yazı tipi simgeleri oluşturmak için gerekli tüm sınıfları içeren uzak bir CSS dosyasına işaret eder.
Bootstrap simgelerini bir Bootstrap şablonuna ve ayrıca Bootstrap çerçevesini kullanmadan basit bir web sayfasına dahil edebilirsiniz.
Aşağıdaki örneğe bir göz atalım:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Icon Kullanımı</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"> <!-- Bootstrap Font Icon CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> </head> <body> <div class="container"> <!--örnek icon kullanımı--> <h1><i class="bi-globe"></i> Merhaba Dünya</h1> </div> <!-- Bootstrap JS Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> </body> </html> |
Çıktı:

Bootstrap Kodunu Nasıl Kullanırsınız?
Bootstrap Icon kodunu kullanmak için CSS sınıf kodlarından .bi-*
uygulayan bir <i>
etiketine ihtiyaç duyarız. Yukarıdaki örnekte küre simgesi için aşağıdaki tanımlamayı yaptık.
1 2 3 | <h1><i class="bi-globe"></i> |
Sınıf-adı, belirli simge sınıfının adı olduğundan örn. search, person, calender, star, globe, facebook, twitter vb. şekillerde kullanabilirsiniz.
Tüm Bootstrap simgeleri sınıflarının listesi için buradaki bağlantıya bakabilirsiniz.
Örneğin, arama simgesini bir butonun içine yerleştirmek için şöyle bir şey yapabilirsiniz:
1 2 3 4 5 6 7 8 9 | <button type="submit" class="btn btn-primary"> <span class="bi-search"></span> Arama </button> <button type="submit" class="btn btn-danger"> <span class="bi-search"></span> Arama </button> |
Iconun görünmesi için koda icon sitenin yüklenmiş olması gerekir. Aşağıdaki gibi icon setinini <head> etiketi içine eklemeyi unutmayın.
1 2 3 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css"> |
Çıktı:

Bu yazıda basit bir şekilde CDN kullanarak bootstrap icon setlerini sitenize nasıl ekleyeceğinizi gösterdik. Tüm icon setleri için buradaki bağlantıyı kullanarak 1.800’den fazla iconu sitenizde kullanabilirsiniz.
Yorum Yap