Dashicons von WordPress

• Developer Resources: Dashicons

Dashicons sind Teil des WordPress-Kerns und für den Admin-Bereich verfügbar. Admins können die Dashicons im "Preview-Modus" oder der "Admin-Ansicht" sehen, aber für die Besucher der Website sind sie nicht sichtbar. Das ist normalerweise auch so gewollt.

Die von WordPress bereitgestellten Dashicons sind zwar ähnlich wie Genericons, jedoch handelt es sich um eine separate Bibliothek und nicht um Genericons selbst.

Die WP-Dashicons auch im Frontend:

Um die WP-Dashicons im Frontend zu nutzen klappt das über wp_enqueue_style, somit kann folgender Code in der Theme functions.php verwendet werden:

function include_dashicons_font(){
    //Lade Dashicons font
    wp_enqueue_style('dashicons');
}
add_action( 'wp_enqueue_scripts', 'include_dashicons_font', 100 );

Siehe Dashicons im Frontend nutzen, oder dieser Code:

add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
    wp_enqueue_style( 'dashicons' );
}

Beide Code-Snippets erfüllen denselben Zweck, nämlich das Laden der Dashicons-Schriftart in WordPress. Allerdings gibt es einen kleinen Unterschied in der Art und Weise, wie der Hook für das Einbinden der Dashicons festgelegt wird.

Der erste Code verwendet die Priorität "100" im Hook add_action( 'wp_enqueue_scripts', 'include_dashicons_font', 100 );. Die Priorität bestimmt die Reihenfolge, in der Aktionen ausgeführt werden. Eine höhere Priorität bedeutet, dass die Aktion später ausgeführt wird. In diesem Fall wird die Dashicons-Schriftart mit der Priorität 100 geladen.

Der zweite Code verwendet keine explizite Priorität und lässt WordPress die Standardpriorität verwenden. In den meisten Fällen wird die Priorität "10" sein, da dies die Standardpriorität für das Hook 'wp_enqueue_scripts' ist.

Die Verwendung der Priorität im ersten Code kann in bestimmten Szenarien nützlich sein, um sicherzustellen, dass die Dashicons-Schriftart später im Ladevorgang eingebunden wird. Dies könnte beispielsweise relevant sein, wenn andere Styles oder Skripte vorher geladen werden müssen.

Beide Ansätze sind jedoch gültig und funktionieren gut. Es ist oft eine Frage der persönlichen Vorlieben oder spezifischer Anforderungen des Projekts. Beide Codes sind akzeptabel und modern im Kontext von WordPress-Entwicklung.

CSS Beispiel das Dashicon für externe Links

Hinweis: Die Icons für die Links sind Genericons.

1. https://developer.wordpress.org/resource/dashicons/#external

2. Auf der Seite dort ist auf Copy CSS zu klicken und
3. so ist das zu verwenden:
   font: normal 16px/1 'dashicons';
content: "\f504";

a[target="_blank"]:after {
    font: normal 16px/1 "dashicons";
    content: "\f504";
    display: inline-block;
    line-height: 1;
    font-size: 1em;
    color: red;
}

• CSS display: inline-block; und line-height.
• color: red; wenns andere Farbe sein soll, sonst weglassen.

Wenn das obige nicht passend wird, dann möglicherweise:

a[target="_blank"]:after {
    font: normal 16px/1 "dashicons";
    content: "\f504";
    vertical-align: -16%;
    font-size: 1em;
    color: red;
}

• CSS vertical-align

Die Links mit Icon ist im Titel Externe und interne Link, mit, und auch ohne Dashicon! zu finden.

Die folgenden Beispiele zeigen, was dich auch ansprechen könnte:

In Hinsicht vertical-align: middle; ist dem Beispiel das beste so im Titel Dashicon vertikal am Text ausrichten.

So Beispiel anders:

.admin-home:after {
    font-family: "dashicons";
    content: "\f504";
    font-size: 1em;
    vertical-align: top;
    text-decoration: none;
}

<a class="admin-home" href="https://wegerl.at">admin-home</a>

admin-home

Dashicon Smiley

Zu diesem Thema gibt es auch einiges hinzuzulernen, insbesondere was Screenreader und das <span>-Element ohne Inhalt betrifft.

Die Dashicons sollten aktiviert sein, wie oben beschrieben:

<i class="dashicons dashicons-smiley" style="font-size: 1.2em; margin-top: 5px;"></i>

  Das Dashicon wäre hier der Website nur für Admins sichtbar, da die Dashicons für Frontend-Besucher generell nicht aktiviert sind. Es ist dennoch sichtbar, weil die Dashicons beitragsspezifisch aktiviert sind. Siehe weiter: Wenn man die Dashicons generell nicht aktivieren möchte, ist das mit diesem JS möglich, welches in diesem Stil eingefügt wird:

CSS und JS gezielt nutzen:
Individuelle Felder; Code per ID/Slug

Bei der Entwicklung individueller Beiträge oder Seiten kann es sinnvoll sein, spezifische CSS- und JavaScript-Codeabschnitte nur bei Bedarf zu laden, um die Leistung der Website ... weiterlesen

WP Wegerl.atLink copie

Mit diesem Code ist das beitragsspezifisch in IndF, wie im obigen Beitrag beschrieben, möglich:

document.addEventListener("DOMContentLoaded", function() {
    // Dashicons-Schriftart einfügen
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = "https://s.w.org/wp-includes/css/dashicons.css?ver=6.0"; // Link zur Dashicons-CSS
    document.head.appendChild(link);
});

Das passende CSS:

/* Dashicon CSS für das Smiley-Icon */
.custom-dashicon-smiley::before {
    font-family: "Dashicons";
    content: "\f328"; /* Smiley */
    font-size: 1.2em;
    position: relative;
    top: 3px;
}

… und das HTML:

<span class="custom-dashicon-smiley" aria-hidden="true">&nbsp;</span> Smiley ist im Frontend sichtbar.

  Smiley ist im Frontend sichtbar.

Das Attribut aria-hidden="true":

aria-hidden="true" ist ein nützliches Attribut, das dafür sorgt, dass Screenreader bestimmte Elemente ignorieren. Das ist besonders hilfreich für dekorative Elemente, wie zum Beispiel Smiley-Icons, die keine wichtigen Informationen liefern.

• Ohne aria-hidden="true": Der Screenreader würde den Smiley-Icon als Element erkennen und möglicherweise sagen: „Es gibt ein Smiley“, wenn es sich um ein dekoratives Element handelt. Das kann für Benutzer, die auf Screenreader angewiesen sind, verwirrend sein, da es keine nützlichen Informationen bietet.
• Mit aria-hidden="true": Der Screenreader ignoriert das Smiley-Icon komplett und gibt keine Informationen darüber aus. Das ist nützlich, wenn du sicherstellen möchtest, dass nur relevante Informationen an die Benutzer übermittelt werden.

  statt Leerzeichen:

<span class="custom-dashicon-smiley" aria-hidden="true"></span> oder <span class="custom-dashicon-smiley" aria-hidden="true"> </span> funktionieren nicht:

Das Verhalten von WordPress beim Entfernen von leeren <span>-Elementen ist eine interessante Eigenheit, die darauf zurückzuführen ist, wie der visuelle Editor HTML verarbeitet.

Ein relevanter Punkt ist, dass das   (non-breaking space) nach dem Umschalten auf den visuellen Modus zwar nicht mehr sichtbar ist, aber dennoch im HTML-Dokument vorhanden bleibt. Das bedeutet, dass das <span>-Element mit   weiterhin im Code bleibt, auch wenn es im Editor nicht angezeigt wird. Dies sorgt dafür, dass das Element nicht entfernt wird, während normale Leerzeichen oft ignoriert und das Element dadurch gelöscht werden.

1. Leere <span>-Elemente:
   • Wenn ein <span>-Tag keinen Inhalt hat, betrachtet WordPress es als überflüssig und entfernt es automatisch, weil es in der Regel als nicht notwendig angesehen wird. Der Editor optimiert den HTML-Code und entfernt Elemente, die keine sichtbaren Auswirkungen haben.
2. Normale Leerzeichen:
   • Normale Leerzeichen (also einfach das Drücken der Leertaste) werden in HTML oft nicht als Inhalt angesehen, besonders in Inline-Elementen. Wenn das <span>-Tag nur ein normales Leerzeichen enthält, interpretiert der Editor dies nicht als signifikanten Inhalt und entfernt das Element.
3. Non-Breaking Space ( ):
   •   steht für „non-breaking space“ und ist ein HTML-Zeichen, das ein sichtbares, nicht umbrochenes Leerzeichen darstellt. Es wird von Browsern als tatsächlicher Inhalt angesehen und sorgt dafür, dass das <span>-Element nicht entfernt wird.
   • Durch die Verwendung von   bleibt das <span>-Tag im HTML-Dokument erhalten, auch wenn es scheinbar keinen visuellen Einfluss hat. Dies ist besonders nützlich, um sicherzustellen, dass das Icon, das durch CSS oder JavaScript hinzugefügt wird, auch weiterhin im DOM vorhanden bleibt.

HTML Beispiel des Dashicons bzw. Genericons

Dashicons können einfach über CSS-Classen aufgerufen werden. Das Icon, das in diesem Beispiel verwendet wird, zeigt beispielsweise ein Download-Zeichen. Es ist zu beachten, dass Dashicons auch über HTML eingebunden werden können. Die Einbindung ist jedoch etwas komplexer und erfordert spezifisches Wissen.

Fehlerhaftes Dashicon und HTML:

Das Dashicon in folgendem HTML-Code ist fehlerhaft:

<a class="dashicons dashicons-download" href="https://../genericons.zip">Download die Genericons ZIP-Datei</a>

Dashicons und HTML richtig einbinden:

In diesem speziellen Beispiel wird der <i>-Tag in Verbindung mit der CSS-Klasse dashicons dashicons-download verwendet, um ein Dashicon innerhalb des <a>-Tags zu platzieren. Der <i>-Tag wird hier für das Icon-Styling als für die semantische Bedeutung von "kursiv" verwendet.

Die Verwendung des <i>-Tags mit der CSS-Classe dashicons dashicons-download dient dazu, das Download-Icon aus den Dashicons einzufügen. Im visuellen Editor kann die korrekte Darstellung und Formatierung von Icons durch die Verwendung von spezifischen Tags und Classen beeinflusst werden. Beachte, dass der <span>-Tag möglicherweise nicht die gewünschte visuelle Darstellung beibehält und die Verwendung von <i> hier daher bevorzugt wird.

Die CSS-Classe ist innerhalb des <a> zu machen.

<a href="https://../genericons.zip"><i class="dashicons dashicons-download"></i> Download die Genericons ZIP-Datei</a>

Dadurch wird das Icon vor dem Text angezeigt. Also wenn die CSS-Classe direkt im <a>-Element verwendet wird, wird das <a>-Element als Icon gewertet. Beachte nochmal, dass die Verwendung von <i class="dashicons"> anders funktioniert als die von <span class="dashicons">, die im Umschalten zum Editor 'Visuell' gelöscht wird.

Link mit Genericon:

Soe ist Link mit Genericon <a href="http://wegerl.at" rel="noopener"><i class="genericon genericon-home" style="vertical-align: middle; font-size: 1.5rem; line-height: 1; margin: -10px 5px 0 0;"></i> nicht so gut.</a>

Soe ist Link mit Genericon nicht so gut..

Dem obigen Beispiel allein durch HTML dasselbe per CSS:

.gen-home:before {
    font-family: "genericons";
    content: "\f409";
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6rem;
    line-height: 1;
    margin: -2px -5px 0 0;
}

… und das HTML

Separater Link mit Genericon ist <a class="gen-home" href="http://wegerl.at" rel="noopener"> konform</a>.

Separater Link mit Genericon ist konform.

Genericons von Automattic

Genericons ist eine Icon-Schriftart von Automattic und gehört nicht zum Standard-Repertoire von WordPress. Einige WordPress-Themes liefern den Genericons-Ordner allerdings standardmäßig mit, so dass diese Schriftart ohne weitere Konfiguration zu nutzen ist. Alternativ können die Genericons mittels Code in der header.php-Datei eingebunden oder selbst gehostet werden.

Genericons
durch HTML-Tags in der 'header.php'

Wenn das Theme den Genericons-Ordner nicht beinhaltet, kann man Code manuell in der header.php-Datei einbinden. Am besten ist der Code vor dem schließenden </head>-Tag einzubinden. Beachte jedoch, dass das Laden der Schriftart zusätzliches Datenvolumen für Nutzer verbraucht, die die Website mit einem Mobilgerät besuchen.

HTML-Tags in der header.php

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/genericons/genericons.css" type="text/css" media="all">

oder

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/genericons@1.0.1/genericons/genericons.min.css" />

Von obig Code ist https://www.jsdelivr.com/package/npm/genericons

Genericons selbst hosten

Genericons können auch selbst gehostet werden. Zum Beispiel ist das Twenty Fourteen Theme inklusive Genericons. Wenn ein anderes Theme diese Schriftart nicht standardmäßig enthält, kann der Genericons-Ordner von der Genericons-Website heruntergeladen werden. Es ist jedoch zu beachten, dass nicht alle Genericons in diesem Ordner genericons enthalten sind. Weitere Informationen dazu sind hier unterhalb zu sehen.

1. Download die Genericons ZIP-Datei
2. Nach dem Download der genericons.zip-Datei (107 KB) ist diese zu Öffnen und der Ordner genericons (174 KB) in das Theme zu laden.
3. Der Theme functions.php:

// Add Genericons font, used in the main stylesheet. 
wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.0.3' );

… Und wenns dann schon mal funktioniert!

Danach kann man die Website https://www.jsdelivr.com/package/npm/genericons besuchen. Dort den Link im Code anklicken und den Inhalt der Datei kopieren. Alternativ ist auch direkt auf die Datei zuzugreifen, indem man https://cdn.jsdelivr.net/npm/genericons@1.0.1/genericons/genericons.min.css aufruft. Die derzeitige Version ist die Datei 4.1.9.

Nach dem Kopieren und einfügen in die  genericons.css welche davor schon mit Ordner genericons am Server ist, da ist noch mal auf den Code von hier oberhalb der functions.php  zu achten. Da ist nämlich  das 3.0.3 in 4.1.9 zu editieren. Also dann:

// Add Genericons font, used in the main stylesheet. 
wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '4.1.9' );

… Wenns Spass macht, hat’s auch noch SinN 🙂

CSS und PHP

• Die CSS-Schablone und so für PHP ist wie Tab 1 das mit den Dashicons.

Bspw für CSS:

a[target="_blank"]:after {
font: normal 16px/1 'genericons';
content: "\f442";
vertical-align: -25%;
font-size:1.5em;
}

Bspw als HTML:

Da ist das mit genericon statt genericons.

<i class="genericon genericon-edit"></i>

Liste der generischen Unicode-Codes

• Genericons unicode codes list

…dabei ist hier scrolle

• Noch mal: Die aktuellste Version gibt es immer hier: https://www.jsdelivr.com/package/npm/genericons

Genericons Neue

Für Web-Designer, die auf der Suche nach einer moderneren Alternative zu den ursprünglichen Genericons sind, bietet sich "Genericons Neue" an. Hierbei handelt es sich um eine erweiterte Version der Original-Schriftart mit über 400 Icons in einer flacheren und saubereren Optik. Weitere Informationen und den Download der Schriftart findet man auf der offiziellen Website https://genericons.com/

Bitte beachte, dass Genericons Neue möglicherweise nicht mit allen Themes und Plugins kompatibel ist und möglicherweise zusätzliche Anpassungen erfordert.

'Genericons Neue' verwenden

1. Um die Icon-Font 'Genericons Neue' zu verwenden, lade diese von GitHub https://github.com/Automattic/genericons-neue/tree/master/icon-font herunter und speichere sie am Server im Theme-Verzeichnis.
2. Um die Icons in einem Projekt zu nutzen, können die in der HTML-Datei gezeigten Classennamen verwendet werden und die entsprechenden CSS-Regeln in eine eigene Stylesheet-Datei eingefügt werden. Die HTML-Datei befindet sich an folgender Stelle: https://github.com/Automattic/genericons-
   neue/blob/master/icon-font/Genericons-Neue.html.

^{Pr. WP-Freund}

Font Awesome von Fonticons, Inc.

Font Awesome ist eine Icon-Font-Bibliothek und kann unter https://fontawesome.com/ gefunden werden.

Font Awesome bietet eine große Auswahl an Icons in Form von SVG-Dateien. SVG-Dateien sind vektorbasiert und können somit ohne Qualitätsverlust in beliebiger Größe dargestellt werden. Darüber hinaus ist es möglich, einzelne Elemente der Icons wie Farbe oder Größe anzupassen. Dies bietet große Flexibilität und spart zudem Speicherplatz, da nicht jedes Icon in jeder benötigten Größe gespeichert werden muss.

Um Font Awesome in einem Theme zu verwenden, kann der Code direkt in der header.php definiert werden. Alternativ ist es möglich, die Icons als Dateien im Theme-Verzeichnis einzubinden.

Font Awesome
durch HTML-Tags in der 'header.php'

Um Font Awesome über Code in der header.php zu definieren, fügt man am besten den Code vor dem abschließenden </head>-Tag hinzu, um eine bessere Pagespeed-Leistung zu erzielen.

HTML-Tags in der header.php

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Font Awesome selbst hosten

• Hosting Font Awesome Yourself!

Dem Download von .zip 5 MB folgt dem Öffnen von 15 MB.

CSS und PHP

Die CSS-Schablone ist wie mit Dashicons.

Bspw für CSS:

a[target="_blank"]:after {
    font: normal 1em/1 "FontAwesome";
    content: "\f08e";
    padding-left: 5px;
    vertical-align: middle;
    font-size: 0.8em;
}

Liste der Font Awesome-Codes

Neben von Free sind auch von PRO

• Die aktuellste Version gibt es immer hier: https://cdnjs.com/libraries/font-awesome

Icon-Fonts selbstgemacht

• Man kann auch eigene Icon-Fonts erstellen, was mit dem Tutorial: Eigene Icons und einen Icon-Font erstellen sehr gut erklärt wird.

Als Beispiel: Für die Headerleiste waren weder die Dashicons noch die Genericons geeignet. Durch die Verwendung von Font Awesome konnten die gewünschten Icon-Fonts gefunden und eingebunden werden.

Eigene Icons erstellen oder bestehende verwenden

Merkzettel: wie man SVG-Icons vorbereitet und als benutzerdefinierte Icon-Fonts in der Header-Leiste einbindet. Dazu soltle man den oben genannten Link folgen.

Als Beispiel habe ich zwei Icons von icon-icons.com/de/ verwendet. Ich habe einfach nach Stichwörtern wie "dark" oder "dunkel"  bzw "hell /dunkel" und "lesen" gesucht, um die passenden Icons zu finden. Nach dem Herunterladen der SVG-Dateien kann man die Website IcoMoon besuchen.

Dort klickt man in der Header-Leiste auf 'Pläne', wählt den kostenlosen Plan und startet die App. Anschließend kann man unter 'Symbole aus der Bibliothek hinzufügen' die heruntergeladenen SVG-Dateien hochladen und bearbeiten. Also:

• In der Headerzeile auf Pläne klicken
• Da bei Kostenloser Plan "Starten Sie die App" … Wird geladen
• Unterhalb " Symbole aus der Bibliothek hinzufügen…" anklicken.
• in ARBEIT das …

Das CSS angepasst:

/* Icon-Fonts Headerleiste */
@font-face {
    font-family: "icomoon";
    src: url("fonts/icomoon.eot?fzaelw");
    src: url("fonts/icomoon.eot?fzaelw#iefix") format("embedded-opentype"),
        url("fonts/icomoon.ttf?fzaelw") format("truetype"),
        url("fonts/icomoon.woff?fzaelw") format("woff"),
        url("fonts/icomoon.svg?fzaelw#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.header-main i {
    /* Wichtig, um Probleme mit Browser -Erweiterungen zu verhindern, die Schriftarten ändern */
    font-family: "icomoon";
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1; /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.i-class {
    /* Verwendung – Individuell */
    position: relative;
    left: -5px;
    top: 7px;
    font-size: 28px !important;
}

.site-navigation li {
    border-top: none;
}

.icon-icons-darkmode:before {
    content: "\e900";
}

.icon-icons-lesen:before {
    content: "\e901";
}

Das HTML im Menü jeweils mit der Class zum Icon-Font und das Individuelle hier als i-class.

<i class="icon-icons-darkmode i-class"></i>HELL- / DUNKEL M O D U S

Icons, auf die ich auch hinweisen möchte

• https://icon-icons.com/de/

Es gibt unzählige Web- bzw. Icon-Fonts, die man für seine Website verwenden kann, 14 Free Icon Fonts for Web Designers (englisch).

So Beispiele:

• https://icon-sets.iconify.design/dashicons/smiley/

So ist auch noch dieses, welches auch sehr beliebt ist …

Die Bootstrap Icons …

Weiter kannst Du mir jede Farbe passen, die dir passt. – das dann etwa im Boxy SVG.

1. Hallo! Da ganz linksaußen das "". Das bin ich, das original SVG von <1 KB.
2. Variiert bin ich nun ein SVG von 2 KB → . – und nicht mehr original. Das hats hier so gebraucht, um mich dann 3-farbig zu sehen. Denn ich bin in einem Path und so unterschiedlich der Farbe, da muss ich neu aufgesetzt werden.
3. So kannst Du mir dann jede Farbe passen, die dir passt.

– klick mich an, es geht immer noch größer, gleicher Qualität.

Wenn mir nur so als Icon eins andere Farbe, dann bleibe ich bei <1 KB wie originär und das ist ganz einfach, also wirklich

Anhang: Wenn du bspw. nach dem Unicode-Symbol ⟳ für das Update-Symbol suchst, findest du es hier: https://www.compart.com/en/unicode/U+27F3. Eine gute Übersicht über andere Zeichen findest du unter https://www.vioma.de/de/wiki/tools/html-sonderzeichen/. Das Symbol aus dem vorherigen Link ist jedoch nicht in dieser Übersicht enthalten.