Web geliştiricileri, belirli bir eylemi temsil etmek için simgeleri kullanmaya çok alışkındır veya simge, herhangi bir komutu veya eylemi veya bir web sayfasındaki bir göstergeyi grafiksel olarak temsil edebilir. Simgeler, uygulamalarda olduğu kadar belgelerde de kullanılır ve seçilebilir veya seçilemez olabilir.
Örneğin bir uygulamanın butonlarında gördüğümüz resimlerin tamamı ikondur ve bu butonlar seçilebilir.
Web sitelerinin tasarımını ve programlanmasını kolaylaştırmak için, bazı yazı tipi simgesi kitaplıkları geliştirilmiştir, yani bir web sitesinin HTML sayfalarında kullanılabilen ve metinmiş gibi eklenebilen simgeler, çok fazla iş tasarrufu sağlar. kullanıcılar, tasarımcılar ve programcılar.
Bu eğitimde, web geliştiricileri tarafından sıklıkla kullanılan önceden ayarlanmış simge yazı tiplerine sahip kitaplıklar olan Font Awesome, Bootstrap Glyphicons ve Material Design Google gibi bazı kitaplıklara bakacağız.
Harika Yazı Tipi Araçları ve Kitaplığı
Font Awesome, simgeleri bir dizi CSS tabanlı araç kullanarak oluşturan bir font kitaplığıdır. Bu araç, Twitter Bootstrap ile kullanılmak üzere geliştirilmiştir ancak herhangi bir web sitesinde stil sayfaları olarak ayrı ayrı kullanılabilir.
CSS kütüphanesi olmanın avantajı, herhangi bir tarayıcı ve cihazda çalışması ve hatta herhangi bir ekran çözünürlüğüne uyum sağlamasıdır.
Kütüphaneyi Font Awesome web sitesinden indirebilirsiniz. Başka bir seçenek de kütüphaneye doğrudan bağlantıyı kullanmaktır:
bir örnek görelim Font Awesome ile sosyal ağlar için simgeler nasıl uygulanır, bir html dosyası oluşturuyoruz ve aşağıdaki kodu ekliyoruz:
Harika Yazı Tipi - Sosyal Medya Simgeleri
Her simge bir sınıf fa-ikonuyla temsil edilir, bu nedenle örneğin YouTube simgesi fa-youtube, tarayıcıda görüntülerken sonuç aşağıdaki gibi olacaktır:
Daha sonra kendi CSS sınıflarımızı ekleyebilir veya önceden tanımlanmış olanı tasarımımıza uyarlamak için değiştirebiliriz, örneğin aşağıdaki CSS kodunu eklediğimiz head etiketleri arasına.
CSS ile simge dekorasyonu
Ardından tarayıcıda çalıştırıyoruz ve sonuç şu olacak:
Her simgeye CSS uyguladığımızı ve herhangi bir resim eklemediğimizi görebiliyoruz. Görünürlüğü iyileştirmek için başka bir seçenek de vurgulu sınıf, yani fare bir simgenin üzerine geldiğinde harfin rengini değiştirin.
Bunu yapmak için, aşağıdaki satırdaki rengi değiştiriyoruz:
.social-icons .fa: üzerine gelin {renk: yeşil; } Bir simgenin üzerine geldiğinizde sonuç aşağıdaki gibi olacaktır:
Bunu, sevdiğimiz bir renk için arka plan özelliğini değiştirerek her simgenin arka planıyla da yapabiliriz.
Mevcut tüm simgeler Font Awesome web sitesinde görülebilir, simgeler kategorilere göre düzenlenmiştir.
Web tasarımlarımızda bu tip ikon yazı tipini kullanmak, görsele ihtiyaç duymadığımız için sayfanın yüklenmesini hızlandırmamıza ve daha yüksek bir kalite sunmamıza olanak sağlar (özellikle mobil cihazlarda yakınlaştırma yaparken)
Glyphicons Önyükleme Araçları ve Kitaplığı
Glyphicons Bootstrap bir yazı tipi simgesi kitaplığıdır. Yazı tipi biçiminde çok çeşitli simgeler sunar. Bu simgeler ücretsizdir ve kitaplığı ücretli simgelerle de genişletebilirsiniz. Ücretsiz simgeler, web tasarım tabanlı projelerde satın almaya gerek kalmadan kullanılabilir. Bu kitaplık, yazdırma, arama, kaydetme vb. gibi bazı işlevleri gerçekleştiren düğmeler için simgelere yöneliktir.
Bu kitaplık Bootstrap içinde stil sayfaları olarak bulunur, onu kullanmak için resmi sayfasından Bootstrap indirebilir veya aşağıdaki bağlantıyı kullanabiliriz:
Simgeleri Glyphicons sayfasında kategorilere göre de görebiliriz.
Şimdi bu kitaplığı düğmeler için simgeler ve bir form için veri girişi öğeleri için kullandığımız bir örneğe bakalım:
Glyphicon Bootstrap - DüğmelerGöründüğü gibi bir mobil cihazda test ettik:Glyphicon Bootstrap - Düğmeler
Ara Yazdır Giriş Yap Satın Al
Liste simgesini bir seçime uygularız
Arabalar Motosikletler
Yazı tipi simgeleri veya yazı tipi simgeleri kullanmanın avantajları, görüntüler kitaplığın css dosyasında svg biçiminde olduğundan ve bu görüntüler ölçeklenebilir olduğundan, bir görüntü veya simge çağırma zorunluluğunu ortadan kaldırmasıdır.
Tam bir kitaplık 10Kb ile 40Kb arasında olabilir, bu da web sitesinin yükleme hızını artırır.
Simgeler metindir, bu nedenle onları CSS ile değiştirebiliriz ve Jquery ile programladığımız herhangi bir olaya yanıt verecektir.
CSS Yazı Tipi özelliğinde bir yazı tipi boyutunu belirtirsek em örneğin, font-size: 4em simgesi duyarlı olacak ve herhangi bir cihaza uyum sağlayacaktır. Ayrıca öğreticide görüldüğü gibi responsive uygulamaları çerçeveler ile programlamak, mobil uygulamaları Ionic Framework ile programlamak için de kullanılabilirler, bu simgeler de kullanılır.
Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.
