Vorteile:
- kein zusätzlicher Server-Request für das Image-Icon,
- automatische Kennzeichnung externer Links,
- kein zusätzlicher HTML-Code nötig.
Das Ergebnis siehst du gleich anhand des nächsten Links im Text unten; dieser verweist auf eine externe Ressource. Hier das nötige CSS:
/* Zunächst alle Links ansprechen und Icon setzen. */
a[href^="http"] { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFZJREFUeF59z4EJADEIQ1F36k7u5E7ZKXeUQPACJ3wK7UNokVxVk9kHnQH7bY9hbDyDhNXgjpRLqFlo4M2GgfyJHhjq8V4agfrgPQX3JtJQGbofmCHgA/nAKks+JAjFAAAAAElFTkSuQmCC") no-repeat scroll right center transparent; padding-right: 13px; }
/* Dann etwaige interne Links überschreiben */
a[href^="http://netzklad.de"] { background: none; padding-right: 0; }
Das Icon eigenständig base64-kodieren
Eigene Icon-Grafiken kannst du über einen Base64-String-Encoder online kodieren und in dein CSS eingefügen (in WordPress wäre dies die style.css deines Themes). Die Kodierung funktioniert auch auf dem eigenen Rechner: du könntest z.B. ein Bild als Entwurf im Mail-Client Thunderbird abspeichern, via Tastenkombination STRG + u in den Quelltext der Entwurfsmail gehen und den base64-kodierten String herauskopieren. In diesem Fall müsstest du das „data:image/jpg;base64,“ natürlich noch manuell davor setzen sowie das „jpg“ an einen ggf. abweichenden Dateityp wie „gif“ oder „png“ anpassen.
Oder aber, falls du Linux verwendest, ist die Umwandlung komfortabel im Terminal möglich:
echo -n "data:image/png;base64," > icon.png.base64 base64 -w0 icon.png >> icon.png.base64
Die Datei icon.png.base64 enhält dann den Text, der, so wie oben gezeigt, im CSS verwendet werden kann.