Icon hinter externen Links einfügen

Inhaltsverzeichnis

Früher waren die Links auf einem Blog oder einer Website klar markiert. Sie hatten alle dieses kräftige Blau, sie waren unterstrichen und sie waren immer und überall sofort erkennbar. Inzwischen hat sich das allerdings geändert. Links sind zwar immer noch farblich markiert, heben sich aber längst nicht mehr so stark vom restlichen Text ab und stechen schon gar nicht hervor.

Dabei ist es doch eigentlich so einfach, zumindest externe Links mit einem Icon zu markieren, um seinen Lesern mitzuteilen, dass sich beim Klick ein neues Fenster öffnet.

Ungemein wichtig, wie ich finde, weil Leser so direkt wissen ob ein Link nur zu einer anderen Unterseite, oder zu einer externen Website führt. Das Icon ist Standard, wird von allen großen Magazinen und Portalen genutzt, nur Blogger vergessen diesen kleinen Hinweis auf ihren Seiten oft. Dabei gibt es dafür gar keinen Grund, denn mit CSS ist das alles sehr schnell gemacht.

Folgendes in eure CSS-Datei einfügen:

a[target="_blank"]:after{content:"";background:url("data:image/png;base64,R0lGODdhCgAKAIAAAGhoaP///ywAAAAACgAKAAACFIwPCcfq5hZKgUJbZ2OwcyltVWQVADs=") no-repeat scroll 100% 40%;margin-right:5px;padding-right:15px}Code-Sprache: CSS (css)

Mit den Attributen innerhalb der CSS lässt sich der externe Link, im Gegensatz zu den normalen Links, aufwändiger gestalten. In diesem Falle wird via CSS ein Base64 Icon hinzugefügt, die wohl beste und einfachste Methode externe Links zu markieren. Falls ihr FontAwesome verwendet, könnt ihr natürlich auch ein Icon der Font verwenden und es dann über “content” integrieren.

Hier zeige ich euch wie ihr font awesome auf dem eigenen Server hostet: Font Awesome lokal installieren

Übrigens: Ihr könnt mittels CSS auch Links zu ganz bestimmten URL’s frei gestalten. So könnt ihr, wenn ihr wollt, beispielsweise hinter allen Links zu Amazon ein eigenes Icon anzeigen lassen. Wie das geht, hatte ich euch schon vor längerem mal in einem Artikel gezeigt. Also worauf wartet ihr noch, markiert eure Links, denn das hilft euren Lesern und damit am Ende auch euch.

Christian Pust
WordPress & Onlinemarketing Experte mit über 15 Jahren Erfahrung. Entwickler & CEO von Trackboxx – der Google Analytics Alternative.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Das könnte dich auch interessieren

Du benötigst Unterstützung bei deinem WordPress Projekt?

Dein Ansprechpartner
Christian