Temel Simgeler
Google simgeleri kullanmak için içeride aşağıdaki satırı ekleyin <head> HTML sayfanızın bölümü:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Not: Hiçbir indirme veya yükleme gereklidir!
Ekle material-icons bir satır içi elemana sınıf ve simgenin adı ekleyin:
Örnek
Aşağıdaki kodu:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons"
style="font-size:48px;">cloud</i>
<i class="material-icons"
style="font-size:60px;color:red;">cloud</i>
</body>
</html>
Sonuçlar içinde:
cloud
cloud
cloud Kendin dene " Google simgeleri satır içi elemanları ile kullanılmak üzere tasarlanmıştır. <i> ve <span> elemanları yaygın simgeleri için kullanılır.
Not: Malzeme simgeler varsayılan olarak 24px edilir.
Ayrıca simgenin kabın rengini değiştirmek durumunda, simgenin rengi de değişiyor unutmayınız. Aynı şeyler gölge ve CSS kullanarak kalıtsal alır başka bir şey için de geçerli. istisna başka bir şey belirtilmediği sürece, her zaman 24px olan CSS font-size bir tesistir.
büyükçe Simgeler
Malzeme simgeler, herhangi bir boyutta yapılabileceği de, tavsiye edilen yazı tipi boyutu ya 18, 24, 36 ya da 48px olduğu:
Örnek
Aşağıdaki kodu:
<style>
/* Rules for icon sizes: */
.material-icons.md-18 { font-size:
18px; }
.material-icons.md-24 { font-size:
24px; } /* Default */
.material-icons.md-36 { font-size:
36px; }
.material-icons.md-48 { font-size:
48px; }
</style>
<i class="material-icons md-18">cloud</i>
<i class="material-icons
md-24">cloud</i>
<i class="material-icons md-36">cloud</i>
<i class="material-icons
md-48">cloud</i>Sonuçlar içinde:
cloud
cloud
cloud
cloud
Kendin dene "