Bootstrap İkon Kullanımı
Bootstrap içeriğimiz tasarımın önemli unsurlarından olan ikonlar ile devam ediyor.
Glyphicons (Halflings), ücretli bir ikon servisi. 260’ın üzerindeki vektör görseli font formatında bize sunan bu yapı Bootstrap ile ücretsiz olarak kullanılabiliyor.
Bugün sizlerle bu ikon setini nasıl ve nerelerde kullanabileceğimizi ileteceğiz.

Bootstrap ile Glyphicon Kullanımı
Bootstrap’in kendisiyle birlikte gelen Fonts klasörürün içerisinde Glyphicons öğeleri barınmakta. Ayrıca Bootstrap.css bu yapıyı otomatik olarak web sitenize entegre etmekte. Dolayısıyla kurulum ile alakalı hiçbir işlem yapmanıza gerek yok.
Performans amaçlı olarak her ikon sabit bir glyphicon classına sahip olarak çalışmakta. Bunun yanında da kullanacağımız ikonun spesifik classını kullanarak görüntüyü oluşturuyoruz.
Örnek Kullanımlar
Glyphicons neredeyse Bootstrap’in tüm elemanları ile birlikte kullanılabiliyor. Bu ikonları panelleriniz içerisinde, butonlarınızda, formlarınızda, modallarınızda, tablolarınızda, menülerinizde, labellarınızda, uyarılarınızda, özetle her yerde kullanabilirsiniz.
İlk nasıl kullanıldığını, sonrasında da nerelerde kullanılabileceğini örneklendirelim.
Temel Kullanım
Şimdi bir büyüteç ikonu oluşturalım.
1 |
<span class="glyphicon glyphicon-search"></span> |
Üstteki kod tanımı kolaylıkla büyüteç ikonu oluşturmamızı sağlıyor. Yukarıda da belirttiğimiz gibi birinci glyphicon classı tüm ikonlara özel stilleri tanımlamakta. İkincisi ise glyphicon-*** yapısıyla yüzlerce ikonu kullanımımıza açıyor. Tek yapmanız gereken *** olan yere istediğiniz ikonun classını eklemek.
Butonlarda İkon Kullanımı
1 2 3 |
<button type="button" class="btn btn-primary btn-lg"> <span class="glyphicon glyphicon-search"></span> Büyüteç </button> |
Uyarılarda İkon Kullanımı
İlk bir button, içerisine de ikon eklememiz yeterli olacaktır.
1 2 3 |
<div class="alert alert-info" role="alert"> <span class="glyphicon glyphicon-ok"></span> <strong>Glyphicons</strong> alert elemanlarında da sıklıkla kullanılmakta. </div> |