Externe Links mit FontAwesome-Icon versehen

Externe Links zu markieren macht durchaus Sinn, denn dann kann sich der Nutzer darauf einstellen die aktuelle Seite zu verlassen bzw. einen neuen Tab zu Gesicht zu bekommen.

Mit CSS und FontAwesome kann man ziemlich schnell ein Icon an externe Links generieren. FontAwesome bekommt ihr hier die Installation ist dort mehr als genügend erklärt soll nicht Inhalt dieses Beitrags werden.

Der Unicode F08E steht in diesem Fall für das sinnvolle Icon „icon-external-link“, dort kann auch jedes andere Icon eingesetzt werden. „:after“ kann genau so gut mit „:before“ ersetzt werden, sodass das Icon nicht hinter sondern vor dem Link erscheint (in dem Fall das padding entsprechend anpassen).

Der Code muss nur in

Tags gepackt, oder in eine extra CSS Datei ausgelagert werden und schon werden entsprechende Icons an externe Links generiert.

 

Felix

 

Schreibe einen Kommentar

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

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.