Back to Yazılar

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-icon-ekleme-ornekleri Bootstrap İkon Kullanımı
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.
glyphicon-search-icon Bootstrap İkon Kullanımı

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

Uyarılarda İkon Kullanımı

İlk bir button, içerisine de ikon eklememiz yeterli olacaktır.

 

İçeriği Puanlayabilirsiniz !

Değerlendirmek için yıldıza tıklayın!

Ortalama puan 0 / 5. Oy sayısı: 0

Şimdiye kadar oy yok! Bu gönderiyi ilk değerlendiren siz olun.

Back to Yazılar