Google Material İcon Kullanımı
Google, " Material Design" altında tasarlanmış 932 icon kümesi sağlar ve bunlar Malzeme Tasarımı simgeleri olarak bilinir. Bu icon'lar basit ve tüm modern web tarayıcıları tarafından desteklenir. Bu simgeler vektör tabanlı olduğu için ölçeklenebilirler. Bu icon'ları kullanmak için font (kütüphane) material icon'larını yüklemeliyiz .
Web için Font icon yazı tipi
Material icon'ları yazı tipi, Material iconlarını web projeleriyle birleştirmenin en kolay yoludur. Tüm Material iconlarını, modern tarayıcıların tipografik oluşturma yeteneklerinden yararlandı tek bir fontta paketlendi, böylece web geliştiricileri bu icon'ları yalnızca birkaç satır kodla kolayca web sitesine ekleyebilirler.
Yazı tipini kullanmak yalnızca en uygun yöntem değil, aynı zamanda etkili ve harika görünüyor:
- Tek bir küçük dosyadan 900'den fazla icon.
- Google Web Font sunucularından servis edilir veya kendi sunucunuza ekleme yapılarak barındırılabilir.
- Tüm modern web tarayıcıları tarafından desteklenir.
- Tamamen CSS ile renklendirilmiş, boyutlandırılmış ve yerleştirilmişdir.
- Vektör tabanlı: Her ölçekte ekranda harika görünürler, retina ekranlarda ve düşük dpi ekranlarda.
Simge yazı tipi en küçük woff2 biçiminde sadece 42KB ve standart woff biçiminde 56 KB'dir. Karşılaştırma ile, gzip ile sıkıştırılmış SVG dosyalarının boyutu genellikle 62 KB civarında olacaktır, ancak bu yalnızca ihtiyacınız olan iconları sembol sprite özellikli tek bir SVG dosyasına derleyerek azaltılabilir.
Material Icons Kütüphanesindeki malzeme tasarım simgelerinin tam setine bakın .
Materail İcon kullanımı
Material icon'ları kitaplığını yüklemek için, aşağıdaki satırı kopyalayıp web sayfasının <head> bölümüne yapıştırın.
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
Google’ın Material İcon'ları uzun bir icon listesi sunar. Bunlardan herhangi birini seçin ve icon sınıfının adını <body> etiketi içindeki herhangi bir HTML öğesine ekleyin. Aşağıdaki örnekte, Content kategorisine ait mail adlı icon kullandık .
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<body>
<i class="material-icons">mail</i>
<i class="material-icons" style="font-size:48px;">mail</i>
<i class="material-icons" style="font-size:60px;color:orange;">mail</i>
</body>
</html>
ÇIKTI:
Google simgeleri, satır içi öğelerinde kullanılmak üzere tasarlanmıştır. <i> Ve <span> elementler yaygın simgeleri için kullanılır.
Ayrıca, icon kabının rengini değiştirirseniz, simgenin renginin de değiştiğini unutmayın. Aynı şeyler gölge ve CSS kullanarak miras kalan başka şeyler için de geçerli. Bunun istisnası, başka bir şey belirtilmediği sürece, her zaman 24 piksel olan CSS yazı tipi boyutu özelliğidir.
Boyut Tanımlama
Malzeme icon'ları herhangi bir boyuta ölçeklendirilebilse de, önerilen yazı tipi boyutu 18, 24, 36 veya 48 pikseldir:
<i class="material-icons style="font-size:18px">computer</i>
<i class="material-icons style="font-size:24px">computer</i>
<i class="material-icons style="font-size:36px">computer</i>
<i class="material-icons style="font-size:48px">computer</i>
ÇIKTI:
Rengin Tanımlanması
Bir icon'un rengini tanımlamak için CSS'yi kullanabilirsiniz. Aşağıdaki örnek, desktop_windows adı verilen bir iconun rengini nasıl değiştirebileceğinizi göstermektedir .
<i class="material-icons style="font-size:48px;color:#ed9121">
desktop_windows</i>
ÇIKTI:
Tarayıcı Desteği
| Element |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| <icon> | 11 | 10 | 3.5 | 5.0 | 15 |
- HTML
- CSS
- PHP
- JQUERY
- PHOTOSHOP
- JavaScript
- Web Dünyası
- Linux
- MİTHRİL FRAMEWORK
- Laravel
- Git
- React
- HTML LİNK(Bağlantı)EKLEME - LİNK VERME
- HTML YAZI VE RESİM ORTALAMA
- HTML RESME LİNK VERME
- HTML FORM OLUŞTURMA
- CSS YATAY MENÜ YAPIMI
- HTML RESİM EKLEME
- CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
- HTML DİV ve SPAN NEDİR?
- HTML ARKAPLANA MÜZİK EKLEME
- KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME