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:

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 .

google meterial icon

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>	
	
Not: İndirme veya kurulum gerekmez!

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:

mail mail mail

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.

Not: Material icon'ları varsayılan olarak 24 pikseldir.

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:

computer computer computer computer

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:

desktop_windows

Tarayıcı Desteği


Element
<icon> 11 10 3.5 5.0 15
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

1694

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML RESME LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.