Meine Beiträge

JoomlaSoftwareNetzwerkWebsolution

  2. Home
  3. Blog
  4. Joomla
  5. Kennzeichnung externer Links
Kennzeichnung externer Links - Kennzeichnung von Links mit Schriftart

Kennzeichnung externer Links - Kennzeichnung von Links mit Schriftart

Joomla
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).

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:

  1.  Die folgende Links verweisen extern auf die eigene Seite (ohne Kennzeichnung):
    http://www.norbert-kreidt.de oder auf https://norbert-kreidt.de
  2. 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: 16576