Externe Links kennzeichnen mit Symbol oder Icon (Anleitung)

Ein kleines Symbol neben externen Links verbessert die Nutzerführung und schafft Transparenz. Mit ein wenig CSS können wir diese Kennzeichnung ganz einfach automatisieren. Wir fügen das Icon dabei mit dem ::after Pseudo-Element zum Link hinzu.

Der Prozess besteht aus zwei Schritten:

1. Die Anzeige-Methode (Das "Wann"): Zuerst wählen wir eine Methode aus, die festlegt, wann ein Icon erscheinen soll.
2. Die Icon-Version (Das "Was"): Danach füllen wir die gewählte Methode mit dem gewünschten Icon-Stil – entweder mit einem einfachen Unicode-Zeichen oder einem Icon von Font Awesome.

Teil 1: Die Anzeige-Methoden (Wann soll ein Icon erscheinen?)

Wähle eine der folgenden drei Methoden aus. Methode 2 ist in der Regel die flexibelste und empfehlenswerteste.

Methode 1: Nur bei Bedarf anzeigen (Opt-In mit .extern)

Das Icon erscheint nur, wenn du einen Link aktiv mit der CSS-Klasse .extern markierst. Dies gibt dir die maximale Kontrolle, erfordert aber manuellen Aufwand bei jedem Link.

/* CSS-Selektor: */
a.extern::after {
  /* ... Icon-Code aus Teil 2 hier einfügen ... */
}

/* HTML-Anwendung: */
<a href="https://beispiel.com" class="extern">Dieser Link erhält ein Icon</a>
<a href="https://andere-seite.com">Dieser Link nicht</a>

Methode 2: Automatisch mit Ausnahmen (Opt-Out mit .no-icon)

(Die empfohlene Methode) Das Icon erscheint automatisch bei allen externen Links. Du kannst jedoch Ausnahmen definieren, indem du einem Link die Klasse .no-icon gibst (z.B. bei Social-Media-Buttons).

/* CSS-Selektor: */
a:not([href*="deine-domain.de"]):not([href^="#"]):not([href^="/"]):not(.no-icon)::after {
  /* ... Icon-Code aus Teil 2 hier einfügen ... */
}

/* HTML-Anwendung: */
<a href="https://externe-quelle.de">Erhält automatisch ein Icon</a>
<a href="https://twitter.com/profil" class="no-icon">Erhält kein Icon</a>

Methode 3: Immer automatisch anzeigen (Global)

Die einfachste, aber am wenigsten flexible Methode. Das Icon wird bei ausnahmslos jedem externen Link angezeigt.

/* CSS-Selektor: */
a:not([href*="deine-domain.de"]):not([href^="#"]):not([href^="/"])::after {
  /* ... Icon-Code aus Teil 2 hier einfügen ... */
}

---

Teil 2: Die Icon-Versionen (Was für ein Icon soll es sein?)

Nachdem du dich für eine Methode aus Teil 1 entschieden hast, füllst du die CSS-Regel mit einer der folgenden Icon-Versionen.

Version 1: Unicode-Symbole (Der einfache Standard)

Dies ist der leichteste und schnellste Weg. Die Symbole sind in den meisten System-Schriftarten enthalten, benötigen keine externen Dateien und sind immer lizenzfrei nutzbar.

Kombiniertes Beispiel (Methode 2 + Unicode-Icon):

a:not([href*="deine-domain.de"]):not([href^="#"]):not([href^="/"]):not(.no-icon)::after {
  content: '\2197'; /* Code für ↗ */
  display: inline-block;
  margin-left: 5px;
  font-size: 0.9em;
}

Auswahl an Unicode-Symbolen:

Symbol	Beschreibung	CSS content Code
↗	Nord-Ost-Pfeil (Klassiker)	content: '\2197';
🔗	Kettenglied (Link)	content: '\1f517';
🌐	Globus	content: '\1f310';

Version 2: Font Awesome Icons (Große Auswahl & Konsistenz)

Diese Version ist ideal, wenn du Font Awesome bereits nutzt oder ein ganz bestimmtes Icon benötigst, das zu deinem Design passt.

Hinweis: Font Awesome lokal einbinden

Um unabhängig von externen Servern zu sein, solltest du Font Awesome selbst hosten.

1. Download: Lade das "Free for Web"-Paket herunter: fontawesome.com/download
2. Upload: Entpacke die ZIP-Datei und lade die Ordner css und webfonts in dein Theme-Verzeichnis (z.B. in einen Unterordner /assets/fontawesome/).
3. Einbinden: Integriere die CSS-Datei über die functions.php deines Themes. Eine detaillierte Anleitung dazu findest du hier: Font Awesome Docs

Kombiniertes Beispiel (Methode 2 + Font Awesome):

a:not([href*="deine-domain.de"]):not([href^="#"]):not([href^="/"]):not(.no-icon)::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* Wichtig für "Solid" Icons */
  content: '\f35d'; /* Code für "arrow-up-right-from-square" */
  display: inline-block;
  margin-left: 5px;
  font-size: 0.9em;
}

Es ist üblich, externe Links in einem neuen Browser-Tab via target="_blank" zu öffnen, damit der Nutzer deine Seite nicht verlässt. Stelle dabei immer sicher, dass du rel="noopener noreferrer" zu deinen Links hinzufügst, um Sicherheitslücken zu schließen.

<a href="https.beispiel.de" target="_blank" rel="noopener noreferrer">Sicherer externer Link</a>