Trick # 45 | Dieser Beitrag beinhaltet 1891 Wörter. – Geschätzte Lesezeit: ca. 10 Minuten.
Ernsthaft erstaunen mag es niemanden: Auch Google bietet im Rennen um die beliebten Icon-Fonts mit. In der Bibliothek steht ein ganzes Füllhorn an Icons zur Verfügung. Anders als bei der Konkurrenz Font Awesome können aber auch interessante Varianten dieser Icons gratis verwendet werden. Grund genug, etwas näher hinzusehen.
Wir haben uns auf dr-code.ch bereits mehrfach dem Thema Icon-Fonts angenommen: «Font-Awesome-Icons einbinden und verwenden» und «DashIcons – die Alternative zu Font Awesome». Heute kommt ein weiteres Kapitel dazu: Wir widmen uns dem Google-Icon-Font.
Das tolle an den Icons der Google-Bibliothek sind die zahlreichen Auszeichnungen, welche kostenlos zur Verfügung stehen. Ein Grossteil der Icons – tatsächlich nicht ganz alle – lassen sich so in Varianten einbinden. Hier einige Beispiele:
«Outlined»
«Rounded»
«Two-Tone»
«Sharp»
Sie sehen: Nicht ganz alle Icons werden von den unterschiedlichen Varianten verändert; die Nuancen sind teilweise auch nur gering.
Google Icons einbinden
Wenn Sie die Google-Icons mit allen derzeit verfügbaren Stilen auf Ihrer Website verwenden möchten, fügen Sie folgende Zeile in den <head>-Bereich Ihrer Website ein:
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">- Um ein Icon auszuwählen rufen Sie nun die Google-Icon-Bibliothek auf. Dort wählen Sie das (oder die) gewünschte/n Icon/s aus. Es gibt auch eine Suchfunktion, über welche sich (vorzugsweise mit englischen Suchbegriffen) Icons finden lassen.
- Wenn Sie nun auf das Icon klicken, erscheint unten links im Browser die Option «Selected Icon». Klicken Sie darauf.
- Nun wird Ihnen der HTML-Code des Icons angezeigt.
- Diesen Code können Sie nach Belieben anpassen und im HTML-Editor an gewünschte Stelle einfügen.
- Ausserdem könnten Sie das Icon als SVG-Grafik oder als PNG herunterladen.
Wir zeigen Ihnen nachfolgend, wie Sie mit Hilfe des HTML-Codes die verschiedenen Varianten am Beispiel des Icons «Help-Center» aufrufen können. Den Code fügen Sie im Backend in Ihren Inhalt ein; müssen dafür aber in den HTML-Editor wechseln.
Sie sehen ausserdem, dass einzige der Part, welchen Sie an «material-icons» anfügen entscheidend ist, welche Variante angeteigt wird.
Filled
<span class="material-icons">
help_center
</span>Ergebnis:
Outlined
<span class="material-icons-outlined">
help_center
</span>Ergebnis:
Rounded
<span class="material-icons-round">
help_center
</span>Ergebnis:
Two-Tone
<span class="material-icons-two-tone">
help_center
</span>Ergebnis:
Sharp
<span class="material-icons-sharp">
help_center
</span>Ergebnis:
Die Google-Icons sind recht vielseitig einsetzbar und eine gute – auch weil kostenlose – Alternative zu den Font Awesome-Icons.
Kleines Supplement: Farben für die Google-Icons
Setzen Sie probehalber folgenden Code in Ihr CSS-Stylesheet (unter Design/Customizer/Zusätzliches CSS):
.material-icons-outlined.dark-blue {
color: #293280;
}Nun rufen Sie ein Icon mit folgendem Code auf – rechts sehen Sie das Ergebnis:
<span class="material-icons-outlined dark-blue">
help_center
</span>Ergebnis:
Werbung
Werbung
