Eine Website ist keine Insel. Und wenn sie schon eine Insel sein will, sollte sie ein Eiland mit vielen Schifffahrtsrouten sein. Sprich: Jede Website sollte auf andere Websites verlinken. Denn das ist der Sinn des Internet. Deshalb heißt es InterNETZ und nicht InterNIE (Nebeneinander Isolierter Eilande). Nicht zwangsläufig müssen Sie solche externen Links kennzeichnen. Die Kennzeichnung kann aber nicht schaden. Mit dem passenden Icon lassen sich auch in WordPress externe Links markieren, sodass jeder sofort weiß: Mit diesem Klick verlasse ich die aktuelle Domain.
Icon – was ist das eigentlich?
Der Begriff Icon (oder auf gut Deutsch: Ikon) stammt aus der Semiotik, der Lehre von den Zeichen. Im Gegensatz zum Symbol ist es dem Icon zu eigen, dass es mit dem bezeichneten Gegenstand eine wahrnehmbare Ähnlichkeit hat. Die Beziehung von einem Symbol zu seinem Objekt hingegen ist eher willkürlich. Ein Beispiel: Wenn Sie das Bild eines Stuhls sehen und dabei merken, dass Sie sich gerne hinsetzen würden, handelt es sich um ein Icon. Sehen Sie hingegen an einer Tür eine Figur, die einen Rock trägt, handelt es sich um ein Symbol, von dem Sie gelernt haben, dass nur Frauen hinter dieser Tür gewissen Geschäften nachgehen können.
In der Computerwelt verschwimmt die Grenze zwischen diesen beiden Begriffen. Wir sprechen von Icons, obwohl sie meist symbolischen Charakter haben. Nicht jedes Objekt lässt sich bildlich so gut darstellen wie ein Drucker. Oder die gute alte 3,25 Zoll-Diskette, die noch immer für den Vorgang des Speicherns steht. Wenn Sie die Diskette als solche erkennen, dann ist sie für Sie ein Icon. Für die meisten jungen Menschen hingegen ist sie ein Symbol, dessen Beziehung zum Speichern völlig willkürlich erscheint und deshalb wie eine Vokabel erst einmal gelernt werden muss. Der symbolische Charakter gilt auch für das Icon externer Link – aber wie soll ein externer Link schon aussehen?
Font (Schriftart) versus Bild
Ein Icon ist also ein Bild mit ikonischem oder symbolischen Charakter. Doch muss es tatsächlich ein Bild sein, sprich: eine Bilddatei? Früher hätte man tatsächlich ein kleines .jpeg oder besser noch ein .gif erstellt und dieses in den Text eingebunden. Heutzutage gibt es für solche Zwecke Schriftarten – oder auf gut Englisch: Fonts. Denn Schriftarten dienen nicht zwangsläufig nur der Darstellung von Buchstaben, Ziffern oder Sonderzeichen wie runde oder eckige Klammern. Sie können auch kleine Bildchen zeigen. Wenn Sie Microsoft Office nutzen, kennen Sie wahrscheinlich die Web- und Wingdings. So etwas in der Art brauchen wir jetzt auch.
Genericons oder Awesome Font
WordPress bietet sozusagen von Hause aus einen entsprechenden Font: Die Genericons stammen von Automattic und stehen genauso kostenfrei zur Verfügung wie der Awesome Font. Letzterer ist nur um einiges umfangreicher. Die meisten Themes nutzen entweder den einen oder den anderen. Bei den Standardthemes wie Twentysixteen sind es natürlich die Genericons. Es gibt aber bestimmt auch Themes, die keinen von beiden eingebunden haben. Aber das ist die Voraussetzung: Der Font muss mit ausgeliefert werden.
Externe Links markieren: CSS-Definition
In WordPress externe Links markieren sollte natürlich ein automatischer Prozess sein. Ziel ist es, dass das System immer dann, wenn Sie einen Verweis auf eine andere Domain gesetzt haben, im Frontend zu diesem Link das passende Icon anzeigt. Handelt es sich aber um einen Link auf eine Seite Ihrer eigenen Domain, soll das System kein Icon ausgeben. Dazu braucht es nicht mehr als eine CSS-Definition. Die kann im Rahmen des benutzerdefinierten CSS stehen, also zum Beispiel im Eingabefeld eines Plugins wie Simple Custom CSS.
CSS-Definition für Genericons
.entry-content a[href^="http://"]:not([href*="Ihre-Domain.de"]):after,
.entry-content a[href^="https://"]:not([href*="Ihre-Domain.de"]):after {
font: normal 16px/1 'Genericons';
content: "\f442";
padding-left:5px;
vertical-align:sub;
font-size:1.5em;
}CSS-Definition für Awesome Font
.entry-content a[href^="http://"]:not([href*="Ihre-Domain.de"]):after,
.entry-content a[href^="https://"]:not([href*="Ihre-Domain.de"]):after {
font: normal 16px/1 'FontAwesome';
content: "\f08e";
padding-left:10px;
font-size: 1em;
}Die Angaben unterscheiden sich nur im Detail. Das Wesentliche steht in den ersten beiden Zeilen: Sie schränken die Definition ein auf alle Links im Rahmen einer Seite oder eines Beitrags (also nicht solche im Menü oder in der Sidebar: .entry-content), die nicht auf Ihre eigene Domain zielen (:not). Nach (:after) solchen Verweisen soll der Font Genericons (bzw. Awesome) Anwendung finden, und zwar konkret dessen (content) Icon \f442 (bzw. \f08e). Die Genericons können noch etwas Justierung der vertikalen Ausrichtung (vertical-align) vertragen und brauchen eine etwas größere Schriftgröße (font-size) als Awesome. Beide benötigen ein wenig Abstand nach links (padding-left).
Im Frontend sieht das Ganze dann so aus:
Mehr sinnvolle Icons
Es gibt noch eine ganze Reihe sehr sinnvoller Icons, die beide Fonts gleichermaßen bieten. Welchen finden Sie schöner?
Update 28.01.2021
Auch wenn dieser Beitrag schon recht alt ist, ist er noch nicht veraltet. Die oben genannten Angaben funktionieren noch immer mit Themes, die Genericons oder den Font Awesome an Bord haben. Allerdings fehlt hier die Antwort auf die Frage, was man tun kann, um Icons in einem Theme zu benutzen, das keinen Icons Font mitbringt. Also zum Beispiel die letzten drei Standardthemes Twenty Nineteen / Twenty / Twenty-One.
Dieser Frage widmet sich der neue Beitrag Wie Sie in WordPress eigene Icons einfügen – und liefert das passende Vorgehen: zeitgemäß, da datenschutz- und SEO-freundlich.
Beitragsbilder: Britta Kretschmer
Schreibe einen Kommentar