Bootstrap İkon Kullanımı | Alaoğlu Tasarım | Fikirlerinizi Tasarlar | Web Tasarım & Grafik Tasarım Hizmetleri

Bootstrap İkon Kullanımı

Bootstrap konulu makalelerimiz 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 konuşacağız.

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.

bootstrap-icon-ornek

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.

glyphicon-search

<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ı

<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.

<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>

Yorum yapabilmek için giriş yapmalısınız

Tıkla Hemen Ara!