Kennzeichnung externer Links - Kennzeichnung von Links mit Schriftart
Seite 2 von 3
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">
:after oder ::after
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).
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.
Zugriffe: 14454