Grund Icons
Um die Google - Symbole zu verwenden, fügen Sie die folgende Zeile innerhalb des <head> Abschnitt Ihrer HTML - Seite:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Hinweis: Kein Download oder Installation ist nicht erforderlich!
Fügen Sie das material-icons Klasse zu einem Inline - Element und fügen Sie der Name des Symbols:
Beispiel
Mit dem folgenden Code:
<!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>
Ergebnisse in:
cloud
cloud
cloud Versuch es selber " Google Symbole werden entworfen, um mit Inline-Elemente verwendet werden. Die <i> und <span> Elemente werden für die Symbole verwendet.
Hinweis: Material Symbole werden 24px standardmäßig.
Beachten Sie auch, dass, wenn Sie die Farbe des Symbols der Container ändern, wird die Farbe des Symbols zu ändern. Gleiche Dinge geht für Schatten, und alles, was mit Hilfe von CSS geerbt wird. Die Ausnahme ist die CSS-Eigenschaft font-size, die immer 24px ist, es sei denn, etwas anderes angegeben ist.
Sizable Icons
Obwohl das Material Symbole können auf jede beliebige Größe skaliert werden, beträgt die empfohlene Schriftgröße ist entweder 18, 24, 36 oder 48px:
Beispiel
Mit dem folgenden Code:
<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>Ergebnisse in:
cloud
cloud
cloud
cloud
Versuch es selber "