Icons verwenden

Ein Icon aus deiner Bibliothek barrierefrei zeigen: mit dem WordPress-Icon-Block, dem Shortcode easy_svg_icon oder der PHP-Funktion easy_svg_icon().

Liegt ein Icon in deiner Bibliothek, kannst du es überall auf deiner Website zeigen. Diese Anleitung erklärt die drei Wege, wann du welchen nimmst und wie Icons für Screenreader-Nutzer zugänglich bleiben.

Bevor du loslegst

Icon-Bibliothek aktivieren ist unter Icons → Einstellungen eingeschaltet.
Mindestens ein Icon liegt in Icons → Icon-Bibliothek. Siehe Icon-Bibliothek.
Du kennst die Adresse des Icons, zum Beispiel easy-svg/heart. Der Kopieren-Knopf auf jeder Kachel liefert dir den genauen Code.

Welchen Weg nehme ich?

Weg	Am besten für	Voraussetzung
Icon-Block	Seiten und Beiträge im Block-Editor, Block-Themes	WordPress 7.1 oder neuer
Shortcode	Klassischer Editor, Widgets, Page Builder mit Textfeld	Jede vom Plugin unterstützte WordPress-Version
PHP-Funktion	Templates in Themes und Plugins	Zugriff auf die Theme-Dateien

Alle drei zeigen dasselbe bereinigte Icon. Nimm den Weg, der zu deinem Arbeitsplatz passt.

Im Icon-Block

Block einfügen

Klicke im Block-Editor auf den +-Inserter und suche nach Icon. Füge den Icon-Block ein.

Icon wählen

Öffne in der Icon-Auswahl die Sammlung Easy SVG. Dort stehen deine Icons mit Namen. Klicke eines an.

Gestalten

Stelle Größe und Farbe rechts in den Block-Einstellungen ein, wie bei jedem anderen Block.

Der Icon-Block kann nur Pfade und Polygone zeichnen. Ein Icon aus Kreisen, Rechtecken oder Linien erscheint in der Block-Auswahl nicht richtig. Nimm für solche Icons den Shortcode oder PHP, oder zeichne sie in deinem Designprogramm als Pfade neu.

Per Shortcode

Ein Shortcode ist ein kurzer Text in eckigen Klammern, den WordPress durch Inhalt ersetzt. Nimm ihn überall dort, wo du Text tippen, aber keinen Code schreiben kannst: in einem klassischen Beitrag, einem Text-Widget oder dem Textelement eines Page Builders.

[easy_svg_icon name="easy-svg/heart"]

Zwei optionale Angaben:

Angabe	Was sie macht	Beispiel
`class`	Hängt eine CSS-Klasse an, damit dein Theme das Icon gestalten kann	`class="icon-rot"`
`label`	Gibt dem Icon einen Namen, den Screenreader vorlesen	`label="Favorit"`

[easy_svg_icon name="easy-svg/heart" class="icon-rot" label="Favorit"]

In PHP

Rufe die Funktion in einem Theme- oder Plugin-Template auf und gib das Ergebnis aus:

<?php echo easy_svg_icon( 'easy-svg/heart' ); ?>

Mit Angaben:

<?php echo easy_svg_icon( 'easy-svg/heart', array( 'class' => 'icon-rot', 'label' => 'Favorit' ) ); ?>

Angabe	Was sie macht
`class`	Hängt eine CSS-Klasse an das Icon
`label`	Gibt dem Icon einen zugänglichen Namen
`decorative`	`true` versteckt das Icon immer vor Screenreadern, `false` lässt es immer vorlesen

Du kannst auch nur den Kurznamen übergeben ('heart'). Ohne Sammlung ist die kostenlose Bibliothek gemeint.

Barrierefreiheit in einer Minute

Screenreader lesen eine Seite für blinde und sehbehinderte Besucher vor. Für sie ist ein Icon eines von zwei Dingen:

Deko, neben einem Text, der schon alles sagt ("♥ Zu den Favoriten"). Es sollte verborgen sein. Genau das passiert, wenn du kein Label angibst.
Bedeutung, wenn es allein steht (ein Herz-Knopf ohne Text). Dann braucht es einen Namen. Gib ihm ein label, zum Beispiel label="Zu den Favoriten".

Gut zu wissen

Ein fehlendes Icon zerlegt nie die Seite. Wurde ein Icon gelöscht oder stimmt die Adresse nicht, geben Shortcode und PHP-Funktion schlicht nichts aus. Im Editor zeigt der Icon-Block einen Hinweis, welches Icon fehlt.
Icons folgen deiner Textfarbe, wenn sie currentColor nutzen. Änderst du die Textfarbe, zieht das Icon mit.
Ältere WordPress-Versionen. Ohne Icon-Block (vor WordPress 7.1) funktionieren Shortcode und PHP trotzdem.

Häufige Fragen

Passende Anleitungen

Icon-Bibliothek

Icons hinzufügen und verwalten.

Page Builder und Felder (Pro)

Icons direkt in Elementor, ACF und anderen wählen.

Für Entwickler: easy_svg_icon(), der Shortcode und alle anderen Funktionen stehen in der Entwickler-Referenz.

Was this page helpful?