Externe Links mit Icon –
Base64 oder SVG

Das Titelbild ist im SVG-Format und 1 KB groß. Diesem SVG ist die Viewbox erweitert und weißer Hintergrund hinzugefügt. Mithin diesem Beispiels würde die Bildfläche nicht ausgefüllt und eine durchscheinende Schraffierung sichtbar sein. S. Viewbox erweitern und Hintergrund erstellen, Boxy SVG

Zur Dekoration für Links eignet sich ein Dashicon. Hier ist ein Dashicon vorgestellt, welches dieser Website visuell ist. Damit folgt die Beschreibung wie das mit base64 oder einem SVG zu bewerkstelligen ist.

Base64

Das Icon oder Dashicon mit base64, bestens beschrieben: Was ist Base64 und was bringt es?

Weiter geht es hier in diesem Beitrage darum, ein Icon mit base64 für externe Links zu erstellen. Hierzu ist das Icon entliehen von der Website flaticon.com/free-icon.

Icon mit base64

In dem nun folgenden Zusammenhang s. evtl. auch den Artikel External Links Dashicon.

  • Das a[target="_blank"]:before ist der Code für die Links zur Visualisierung des Icons. Diese Links öffnen durch target="_blank" also in neuem Tab.
  • Die Vorlage :not([href*="gravatar.com"]) bezieht sich der Linkadresse „gravatar.com“. Deren ist hiermit die Darstellung des Dashicons nicht wiedergegeben und die normale Visualisierung des Hovers, s. hierzu obigen Hinweis, „External Links Dashicon“.
  • Das Icon nach der Linkadresse anpassen? – also anstatt before ↔ after.
  • Visualisierung mittels background: url(data:image/svg+xml;utf8;base64,. Der folgende Mix an Buchstaben, Ziffern und Sonderzeichen ist der Code base64 des Icons. Weiter s. die Beschreibung unter dem Code.

Die direkten CSS Codes sind Farbig hervorgehoben:

/* Externe Links mit Icon */
a[target="_blank"]:not([href*="gravatar.com"]):before {
content: "";
background: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDQ4Ny45NTggNDg3Ljk1OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDg3Ljk1OCA0ODcuOTU4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPiAgPGc+ICAgIDxwYXRoIGQ9Ik00ODMuMDU4LDIxNS42MTNsLTIxNS41LTE3Ny42Yy00LTMuMy05LjYtNC0xNC4zLTEuOGMtNC43LDIuMi03LjcsNy03LjcsMTIuMnY5My42Yy0xMDQuNiwzLjgtMTc2LjUsNDAuNy0yMTMuOSwxMDkuOCBjLTMyLjIsNTkuNi0zMS45LDEzMC4yLTMxLjYsMTc2LjljMCwzLjgsMCw3LjQsMCwxMC44YzAsNi4xLDQuMSwxMS41LDEwLjEsMTMuMWMxLjEsMC4zLDIuMywwLjQsMy40LDAuNGM0LjgsMCw5LjMtMi41LDExLjctNi44IGM3My0xMjguNywxMzMuMS0xMzQuOSwyMjAuMi0xMzUuMnY5My4zYzAsNS4yLDMsMTAsNy44LDEyLjJzMTAuMywxLjUsMTQuNC0xLjhsMjE1LjQtMTc4LjJjMy4xLTIuNiw0LjktNi40LDQuOS0xMC40IFM0ODYuMTU4LDIxOC4yMTMsNDgzLjA1OCwyMTUuNjEzeiBNMjcyLjU1OCwzNzUuNjEzdi03OC4xYzAtMy42LTEuNC03LTQtOS41Yy0yLjUtMi41LTYtNC05LjUtNGMtNTQuNCwwLTk2LjEsMS41LTEzNi42LDIwLjQgYy0zNSwxNi4zLTY1LjMsNDQtOTUuMiw4Ny41YzEuMi0zOS43LDYuNC04Ny4xLDI4LjEtMTI3LjJjMzQuNC02My42LDEwMS05NS4xLDIwMy43LTk2YzcuNC0wLjEsMTMuNC02LjEsMTMuNC0xMy41di03OC4yIGwxODAuNywxNDkuMUwyNzIuNTU4LDM3NS42MTN6IiBzdHlsZT0iZmlsbDogcmdiKDQzLCA0MywgNDMpOyIvPiAgPC9nPjwvc3ZnPg==) no-repeat left center;
  padding: 4px 6px 5px 10px;
  background-size: 13px;
}
  • no-repeat left center; bezieht sich auf die grundlegende Position.
  • padding und background-size bedarf der individuellen Einstellung. Hierzu eignet sich sehr gut unser Customizer.

task flaticon.com/free-icon

Icon andere Farbe

Durch die Website flaticon.com/free-icon ist mit dem Farbwähler die konkrete Farbe einzustellen:

  • Button  </>base64 anklicken – Farbwähler– Download / Free Download – Kopie von“ CSS background“: Code nach url(data:image/svg+xml;utf8;base64.  Das ist dann der Icon Code. Dieser ist vorlagengerecht einzufügen.
Übungshalber:

Das originale Icon ist in Farbe Schwarz. Nachdem das Icon der Schriftfarbe angepasst sein sollte, eingangs erwähnten Hinweis (flaticon.com/free-icon) das Icon im SVG-Format downloaden. Sodann über Boxy SVG der entsprechenden Schriftfarbe z. B. #2b2b2b anpassen und über die Website b64.io in Base64 konvertieren – geht auch 🙂

Speicherbedarf des Icons

Das vorgestellte Icon hat in Base64 196 KB! –, warum dies noch performant sein soll? S. elbnetz.com/icon-fonts-in-wordpress:

Wieso Icon Fonts und keine Bilddateien?

Um ein Bild zu laden, sendet der Browser eine HTTP-Anfrage an den Server. Laden nun alle Icons als Bilddateien, so wird pro Icon eine HTTP-Anfrage an den Server gesendet, um das jeweilige Icon darzustellen. Das muss nicht zum Problem werden – aber kurz gesagt: Je mehr Anfragen an den Server, desto weniger Performanz. Icon Fonts sind deutlich Server freundlicher. Einmal eingebunden brauchen diese Fonts nur eine einzige HTTP-Anfrage für alle Icons zu senden.

Dennoch bleibt meine Frage: 10 x 1 KB gegen einmal 196 KB?

Im Heute mit HTTP/2 ist das mit den HTTP-Anfragen ohnehin eine Nebensache. Daher …

SVG mit 1 KB

Anders, und eigentlich dasselbe in SVG mit 1 KB. Anders ist nur, dass anstatt des Codes base64 die URL zur Datei des SVG einzutragen ist.

a[target="_blank"]:not([href*="gravatar.com"]):before {
content: "";
/*position:relative;*/
    background: url("https://simpel.wegerl.at/wp-content/uploads/2019/06/Pfeil-Capa_1.svg") no-repeat left center;
padding: 4px 6px 5px 8px;
background-size: 12px;
}

Link-Dekorationen bspw.

S. CSS-Text-Dekoration, Links unterstreichen.

/* --- LINKS Auszeichnungen --- */ a[target="_blank"]:not([href*="gravatar.com"]):before {
content: "";
/*position:relative;*/
    background: url("https://simpel.wegerl.at/wp-content/uploads/2019/06/Pfeil-Capa_1.svg") no-repeat left center;
padding: 4px 6px 5px 8px;
background-size: 12px;
}

/* Externe Links */
a[target="_blank"] { text-decoration: none; }

/* Interne Link Unterstrich gestrichelt */
a:link { text-decoration-style: dashed; -webkit-text-decoration-style: dashed; } 

/* Zum TabMenü-Inhaltsverz. ohne Unterstrich */
a[href*="#ih"] { text-decoration: none; } 

/* Info-Button on/off ohne Unterstrich */
.sh-link A { text-decoration: none; }

/* ---ENDE, Links Auszeichnungen--- */