Ders 3 : 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.

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.

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

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

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

Bitirmeden Önce

Acaba Ortodosklar azizlerin resimlerini tahta üzerine mum ve yumurta ile çizerken bu tasarım türünün geleceğe damga vuracağını düşünmüşler miydi?

Evet, ikonların tarihi böyle. Günümüzde ise biz tasarımcılar onları genellikle dikkat çekici yapıları sebebiyle vurgulamak istediğimiz yerlerde kullanmaktayız. Peki niye bu kadar önemliler?

Gözünüzün önüne Steve Jobs‘ın sunumları gelecektir. Bir sunum dosyasına madde madde tüm yenilikleri yazmaktansa bunları birer ikon ile ifade eden Steve’in temel hedefi görsel hafızalarımızdı. Ve başarılı da oldu. Görsel İletişim ile meşgul kişiler için bir devrim yarattı. Beraberinde tasarımda simplicity(basitlik) günden güne daha da önem kazanır oldu. Makalemizi Steve Jobs’ın etkileyici sunumlarından biriyle bitiriyoruz.

İyi çalışmalar.