Link-Dekorationen
Externe Links mit Icon – Base64

Zum Titelbild dieses Beitrags: Dem Titelbild (SVG-Format, 1 KB) ist über Boxy SVG die sichtbare Viewbox erweitert und Hintergrund definiert, da sonst die gesamte Bildfläche nicht ausgefüllt ist und dahinter Schraffierung durchscheint.


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

Es geht diesem Beitrage im einen darum, ein Icon mit base64 für externe Links zu erstellen. Das Icon in Anwendung für externe Links ist der Website flaticon.com/free-icon entliehen.

Im anderen sind ein paar CSS-Link-Dekorationen hinsichtlich meiner Website zusammengefasst. 

Icon mit base64

In Relation External Links Dashicon.

  • Das a[target="_blank"]:before ist der Code für die Links, die in neuem Tab geöffnet werden, zur Visualisierung des Icons.
  • Die Vorlage :not([href*="gravatar.com"]) bezieht sich der Linkadresse „gravatar.com“, deren ist hiermit die Darstellung des Dashicons nicht wiedergegeben und indessen normale Visualisierung des Hovers, s. hierzu Hinweis eingangs, „External Links Dashicon“.
  • Das Icon nach der Linkadresse: anstatt before ↔ after
  • Visualisierung mittels background: url(data:image/svg+xml;utf8;base64,… folgend Mix an Buchstaben, Ziffern und Sonderzeichen (Code base64) des eigentlichen Icons; weiter s. unter dem Code.

Die CSS Codes Farbig hervor gehoben:

/* Externer Link 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 individuelle Einstellung. Hierzu eignet sich sehr gut unser Customizer.

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?

Wenn ein Bild geladen wird, wird eine HTTP-Anfrage an den Server gesendet. 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 Performance. 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?

task flaticon.com/free-icon

Icon andere Farbe

Der Website flaticon.com/free-icon kann man mit dem Farbwähler die konkrete Farbe einstellen:

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

Das original 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 Schriftfarbe #2b2b2b anpassen und über die Website b64.io in Base64 konvertieren – geht auch :-)

Link-Dekorationen

S. CSS-Text-Dekoration, Links unterstreichen.

/* --- LINKS Auszeichnungen --- */
/* Externe Links mit Icon */
s. Icon mit base64
/* 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--- */

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.