![Kennzeichnung externer Links - Kennzeichnung von Links mit Schriftart](/images/prolog/joomla-loesung.jpg)
Kennzeichnung externer Links - Kennzeichnung von Links mit Schriftart
Kennzeichnung von Links mit Schriftart
Eine weitere Möglichkeit Links zu kennzeichnen ist mit Schriftzeichen.
Hierbei kann man folgende Anbieter nutzen: Icomoon.io oder Fontawesome.com
Wie man die Fonts auf seine Homepage einbindet ist auf der jeweiligen Hompage des Anbieters ausführlich beschrieben. Diese Font-Icons können direkt per download auf die Seite geladen - oder auch per Link im <head>-Bereich eingebunden werden.
Beispiel
<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">
In den nachfolgenden CSS-Codes wird das pseudo-elements ::after verwendet. Dies ist die neueste Schreibform und wird z.B, von älteren Browsern, wie Internet Explorer 8 nicht unterstützt. Dieser unterstützte nur die Syntax mit nur einem Doppelpunkt (:after).
CODE 1
a[href^="http://"]::after, a[href^="https://"]::after, a[href^="ftp://"]::after { font-family: FontAwesome; content: "f105"; }
Verweise auf die eigene Seite sollen keine Kennzeichnung erhalten. Wie man dies anhand eines CSS-Tips bewerkstelligt, kannst du im folgenden Codebeispiel sehen.
CODE 2
a[href^="http://www.norbert-kreidt.de"]::after, a[href^="http://norbert-kreidt.de/"]::after, a[href^="https://www.norbert-kreidt.de"]::after, a[href^="https://norbert-kreidt.de/"]::after { content: none; }
Ergebnis:
- Die folgende Links verweisen extern auf die eigene Seite (ohne Kennzeichnung):
http://www.norbert-kreidt.de oder auf https://norbert-kreidt.de - Die folgende Links verweisen extern auf eine andere Seite (mit Kennzeichnung):
https://www.google.de oder auf https://google.de
Wie man eine Kennzeichnung mit Ausnahme erstellt, kannst Du auf der nachfolgenden Seite sehen.