Podstawowe ikony
Aby użyć ikon Google, dodaj następującą linię wewnątrz <head> sekcji strony HTML:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Uwaga: Nie ma potrzeby pobierania lub instalacji!
Dodaj material-icons klasę inline elementu i wstawić nazwę ikonę na:
Przykład
Poniższy kod:
<!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>
Prowadzi do:
cloud
cloud
cloud Spróbuj sam " Google ikony są przeznaczone do współpracy z elementami wbudowanymi. <i> oraz <span> elementy są szeroko stosowane do ikon.
Uwaga: Materiał ikony są 24px domyślnie.
Należy również pamiętać, że jeśli zmieni kolor pojemnika na ikonę, kolor ikony zmienia też. Te same rzeczy odnosi się do cienia, i wszystko, co dostaje dziedzicznej za pomocą CSS. Wyjątkiem jest właściwość font-size CSS, który jest zawsze 24px, chyba że co innego jest określony.
spora Ikony
Chociaż materiał ikony mogą być skalowane do dowolnej wielkości, zalecana font-size jest albo 18, 24, 36 lub 48px:
Przykład
Poniższy kod:
<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>Prowadzi do:
cloud
cloud
cloud
cloud
Spróbuj sam "