Web Simgeleri - Giriş
Simge, bir web sayfasındaki belirli bir eylemi veya yeteneği temsil etmek için kullanılan bir semboldür. Simgeler belgelerde ve uygulamalarda kullanılır ve seçilebilir veya seçilemez olabilirler. Örneğin, bir uygulamanın butonlarında gördüğümüz görsellerin tamamı ikonlardır ve bu butonlar seçilebilir. Benzer şekilde, bir simgeyi şirket logosu olarak kullandığımızda, normalde seçilemez.
Windows ortamında, sistem sesini kısarsak, aşağıda gösterildiği gibi bir ikon yardımı ile temsil edilecektir.
Web simgelerini kullanarak, bir yükleme sayfasını, devre dışı bırakılmış bir seçeneği, bir bağlantıyı, bir yeniden yönlendirmeyi, vb. Temsil edebiliriz. Bu simgeler çevrilebilir, döndürülebilir, yeniden boyutlandırılabilir, çerçevelenebilir, ters çevrilebilir ve renklendirilebilir.
Simge Yazı Tipleri
Simge Yazı Tipleri, semboller ve glifler içerir. İstediğiniz yazı tipini yükledikten sonra, simgenin sınıf adını kullanarak o yazı tipi tarafından sağlanan simgelerden herhangi birini kullanabilirsiniz. Simgelere farklı renkler uygulayabilir ve CSS özelliklerini kullanarak bunları yeniden boyutlandırabiliriz. Simgeler sağlayan birkaç simge kitaplığı (yazı tipi) vardır. Bu öğretici üç ana yazı tipine odaklanmaktadır:
- Harika Yazı Tipi
- Bootstrap Glyphicons
- Google'ın Materyal Simgeleri
Harika Yazı Tipi
Bu yazı tipi 519 ücretsiz ölçeklenebilir vektör simgesi sağlar. Bu kütüphane hem kişisel hem de ticari kullanım için tamamen ücretsizdir. Bu simgeler kolaylıkla özelleştirilebilir. Başlangıçta Bootstrap için geliştirildi.
Bootstrap Glyphicons
Bu, raster görüntü biçimlerinde, vektör görüntü biçimlerinde ve yazı tipi olarak kullanılabilen tek renkli simgelerden oluşan bir kitaplıktır. Yazı tipi biçiminde 250'den fazla glif sağlar. Bu yazı tiplerini web projelerinizde kullanabilirsiniz. Bu simgeler ücretsiz değildir, ancak onları Bootstrap tabanlı projelerde satın almak zorunda kalmadan kullanabilirsiniz.
Google'ın Materyal Simgeleri
Google, "materyal tasarım yönergeleri" kapsamında tasarlanmış yaklaşık 750 simge sağlar ve bunlar Material Designsimgeler. Bu simgeler basittir ve tüm modern web tarayıcılarını destekler. Bu simgeler vektör tabanlı olduklarından ölçeklenebilirler. Bu simgeleri kullanmak için yazı tipini (kütüphane) yüklemeliyizmaterial-icons.