Statt Font Awesome: Google-Icons einbinden und nutzen

14. Februar 2021 | Fonts & Icons, HTML, WordPress

Dieser Beitrag beinhaltet 1567 Wörter. Geschätzte Lesezeit: ca. 8 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:

«Filled»

bookmark

email

cloud

person

free_breakfast

info

«Outlined»

bookmark

email

cloud

person

free_breakfast

info

«Rounded»

bookmark

email

cloud

person

free_breakfast

info

«Two-Tone»

bookmark

email

cloud

person

free_breakfast

info

«Sharp»

bookmark

email

cloud

person

free_breakfast

info

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:

help_center

Outlined

<span class="material-icons-outlined">
help_center
</span>

Ergebnis:

help_center

Rounded

<span class="material-icons-round">
help_center
</span>

Ergebnis:

help_center

Two-Tone

<span class="material-icons-two-tone">
help_center
</span>

Ergebnis:

help_center

Sharp

<span class="material-icons-sharp">
help_center
</span>

Ergebnis:

help_center

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:

help_center

Auf diese Weise können Sie die Icons im Handumdrehen zu Ihrem Design passend einfärben.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This