Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

---

Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

---

Werbung

Einfach und intuitiv –
Der Classic-Editor für alle.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

---

Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

---

In diesem Beitrag erfährst du, wie du Links mit Icons verzieren kannst. Wir erklären dir, wie du diese Aufgabe mithilfe von Base64 und SVG umsetzen kannst. Der Beitrag enthält detaillierte Informationen und eine Anleitung, die dir bei diesem Vorhaben helfen werden. Zudem eignet sich dieser Beitrag ideal, um das Kennenlernen und die Anwendung von Base64 und SVG zu unterstützen. Wir diskutieren auch die Auswirkungen auf die Performance deiner Website und behandeln das Thema Performanz in Bezug auf die Verwendung von Icons.

Icon mit Base64

Hier lernst du, wie du ein Icon mithilfe von Base64 für externe Links erstellen kannst. Das verwendete Icon wurde von der Website flaticon.com/free-icon entliehen und wird im Folgenden genauer beschrieben.

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

• Der Code a[target="_blank"]:before wird verwendet, um das Icon für die Visualisierung der Links einzubinden.
  • Diese Links werden durch target="_blank" so konfiguriert, dass sie in einem neuen Tab geöffnet werden.
• Die Vorlage :not([href*="gravatar.com"]) bezieht sich auf die Linkadresse "gravatar.com". Dadurch wird die Darstellung des Dashicons für diese Adresse nicht angewendet und die normale Visualisierung des Hovers bleibt bestehen. Für weitere Informationen dazu siehe den oben genannten Hinweis "External Links Dashicon".
• Möchtest du das Icon nach der Linkadresse zeigen? Dann kann statt before auch after verwendet werden.
• Die Visualisierung des Icons erfolgt über background: url(data:image/svg+xml;base64,. Der nachfolgende Mix aus Buchstaben, Ziffern und Sonderzeichen sind der Base64-Code des Icons. Für eine detaillierte Beschreibung des Codes siehe die Erklärung unterhalb des Codes.

/* 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 des Icons, nämlich links zentriert, und stellt sicher, dass das Icon nicht wiederholt wird.
• Die Einstellungen für padding und background-size müssen individuell angepasst werden, je nach Bedarf. Für diese Anpassungen eignet sich unser Customizer sehr gut.

(Veraltet Bemerkung) Um das Icon in einer anderen Farbe darzustellen, kann über die Website flaticon.com die gewünschte Farbe ausgewählt werden:

1. Den Button '</>base64' anklicken und den Farbwähler verwenden.
2. Den Download / Free Download des Icons durchführen.
3. Den CSS-Code nach url(data:image/svg+xml;utf8;base64 kopieren. Dieser Code repräsentiert das Icon.
4. Den Code entsprechend der Vorlage einfügen.

Zum Üben: Das ursprüngliche Icon ist in Schwarz. Um es an die Schriftfarbe anzupassen, kann das Icon im SVG-Format von der oben erwähnten Website (flaticon.com) heruntergeladen werden. Anschließend kann es mit einem Tool wie Boxy SVG auf die gewünschte Schriftfarbe, z. B. #2b2b2b, angepasst werden. Das konvertierte Icon kann dann über die Website b64.io in Base64 umgewandelt werden – auch das ist möglich 🙂

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 werden Icon Fonts verwendet anstatt Bilddateien?

Wenn ein Bild geladen wird, sendet der Browser eine HTTP-Anfrage an den Server. Wenn jedes Icon als Bilddatei geladen wird, bedeutet das, dass für jedes Icon eine separate HTTP-Anfrage an den Server gesendet werden muss, um es darzustellen. Das kann zu einem Problem führen, denn je mehr Anfragen an den Server gesendet werden, desto geringer ist die Performance. Im Vergleich dazu sind Icon Fonts serverfreundlicher. Sobald sie einmal eingebunden sind, muss nur eine einzige HTTP-Anfrage für alle Icons an den Server gesendet werden.

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

Wenn es um die Performance und Ladezeit einer Webseite geht, ist es in der Regel effizienter, eine einzige Datei mit 196 KB zu laden, anstatt 10 separate Dateien mit jeweils 1 KB. Das liegt daran, dass bei jedem Laden einer Datei eine separate HTTP-Anfrage an den Server gesendet werden muss, was zusätzliche Latenzzeit verursachen kann. Durch das Zusammenführen der Icons zu einer einzigen Datei wird die Anzahl der HTTP-Anfragen reduziert und die Ladezeit optimiert.

Jedoch kann es Situationen geben, in denen die Dateigröße eine Rolle spielt, z.B. wenn die Bandbreite begrenzt ist oder die Webseite auf mobilen Geräten geladen wird. In solchen Fällen kann es sinnvoll sein, die Dateigröße der Icons zu minimieren und auf kleinere Dateien von 1 KB zurückzugreifen.

Es ist also eine Abwägung zwischen der Anzahl der HTTP-Anfragen und der Dateigröße. In der Regel wird empfohlen, die Anzahl der Anfragen zu minimieren, aber gleichzeitig die Dateigröße im Rahmen zu halten, um eine optimale Performance zu gewährleisten.

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

Ja, das ist eine valide Überlegung. Mit der Einführung von HTTP/2 hat sich die Art und Weise geändert, wie der Browser mit HTTP-Anfragen umgeht. HTTP/2 ermöglicht die parallele Übertragung mehrerer Ressourcen über eine einzige TCP-Verbindung, wodurch Engpässe bei den HTTP-Anfragen verringert werden.

Durch diese Multiplexing-Funktion von HTTP/2 werden Anfragen effizienter gehandhabt, und die Anzahl der Anfragen spielt eine weniger bedeutende Rolle als zuvor. Es bedeutet, dass der Unterschied in der Anzahl der Anfragen zwischen 10 x 1 KB und einmal 196 KB weniger spürbar ist.

Dennoch ist es wichtig zu beachten, dass die Dateigröße immer noch eine Rolle spielen kann, insbesondere bei langsameren Internetverbindungen oder mobilen Geräten. Eine große Dateigröße kann immer noch zu längeren Ladezeiten führen, und es ist empfehlenswert, die Dateigröße auf ein vernünftiges Maß zu halten, um die Ladeleistung zu optimieren.

Insgesamt ist HTTP/2 ein Fortschritt in Bezug auf die Effizienz der HTTP-Anfragen, aber die Dateigröße sollte dennoch im Auge behalten werden, um eine bestmögliche Performance zu erzielen.

Daher eventuell …

SVG mit 1 KB

SVG mit 1 KB

Eine alternative Möglichkeit besteht darin, das Icon als SVG mit einer Dateigröße von 1 KB einzubinden. Hierbei wird anstelle des Base64-Codes die URL zur SVG-Datei verwendet. Diese Methode ermöglicht die Verwendung des Icons in einem skalierbaren Vektorformat mit geringer Dateigröße.

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

Durch die Verwendung des SVG-Formats wird das Icon im Browser gerendert und kann ohne Qualitätsverlust in verschiedenen Größen skaliert werden. Dies ist besonders nützlich, wenn das Icon auf verschiedenen Bildschirmgrößen oder Auflösungen angezeigt werden soll.

Um das SVG-Icon einzubinden, muss lediglich die URL zur SVG-Datei angegeben werden. Der Browser lädt die Datei und stellt das Icon entsprechend dar.

Diese Methode bietet eine weitere Option, um Icons effizient und platzsparend in Webseiten einzubinden, ohne die Performance zu beeinträchtigen.

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://..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 -- */

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 April