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 sein und durchscheinende Schraffierung. 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 die Beschreibung wie das mit base64 oder 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 Relation External Links Dashicon.

  • Das a[target="_blank"]:before ist der Code für die Links zur Visualisierung des Icons, die in neuem Tab öffnen.
  • 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 obigen Hinweis, „External Links Dashicon“.
  • Das Icon nach der Linkadresse, also anstatt before ↔ after.
  • Visualisierung mittels background: url(data:image/svg+xml;utf8;base64, folgend der Mix an Buchstaben, Ziffern und Sonderzeichen ist der Code base64 des eigentlichen Icons. Weiter s. die Beschreibung unter dem Code.

Die direkten CSS Codes Farbig sind hervor gehoben:

/* 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 individuelle 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 der Icon Code. Diesen vorlagengerecht einfü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?

SVG mit 1 KB

Anders, und eigentlich dasselbe SVG 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://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 wie zum Beispiel

S. CSS-Text-Dekoration, Links unterstreichen.

Im folgenden sind nur ein paar CSS-Link-Dekorationen zusammengefasst:

/* --- LINKS Auszeichnungen --- */ a[target="_blank"]:not([href*="gravatar.com"]):before {
content: "";
/*position:relative;*/
    background: url("https://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--- */

Ist der Beitrag hilfreich?