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, kann folgender Code in der Theme functions.php verwendet werden:

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

Siehe Dashicons im Frontend nutzen.

CSS Beispiel das Dashicon für externe Links

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";
    vertical-align: -16%;
    font-size: 1em;
    color: red;
}

• CSS vertical-align
• color: red; wenns andere Farbe sein soll, sonst weglassen.
• Anmerkung: Die Schablone ist des bspw hier der Website und da sind die externen Link ohne Unterstrich.

a[target="_blank"] {
    text-decoration: none;
}

Das weitere CSS bleibt jedem Webmaster für sich.

Der Link da ist auch sehr ansprechend. So 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: "\f102";
    font-size: 1.1em;
    vertical-align: top;
}

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

admin-home

So wäre das Dashicons ohne Unterstrich:

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

admin-home

… und so ist es richtig:

<a class="admin-home" style="text-decoration: none;" href="https://wegerl.at">admin-home</a>

admin-home

• Eben des Gebrauchs von mehr wie das Dashicon für externe Links ist das aber über CSS ↑.

Dashicons in PHP-Code einbinden und visuell darstellen

In diesem Abschnitt wird gezeigt, wie Dashicons in PHP-Code eingebunden und visuell dargestellt werden können. Hierfür kann der HTML-Code von der offiziellen Dashicons-Website kopiert und in den PHP-Code eingefügt werden, wie im folgenden Beispiel demonstriert wird.

1. https://developer.wordpress.org/resource/dashicons/#update
2. Auf der Seite dort ist auf Copy HTML zu klicken und
3. so ist das hier zu verwenden: <span class="dashicons dashicons-update">

Für das Beispiel mit PHP-Code wie er diesem Beitrag. Das ist mit Zeichen für Update und einmal mit einem Kalender.

<?php
$u_time = get_the_time('U');
$u_modified_time = get_the_modified_time('U');
if ($u_modified_time >= $u_time + 86400) {
    echo ' <span class="dashicons dashicons-update"></span> ';
    the_modified_time('Y-F');
    echo "&nbsp;&nbsp;&nbsp;";
} else {
    echo ' <span class="dashicons dashicons-calendar-alt"></span> ';
the_time('Y-F');
}
?>

HTML Beispiel des Dashicons

Dashicons können einfach über CSS-Klassen aufgerufen werden. Das Icon, das in diesem Beispiel verwendet wird, zeigt beispielsweise ein Download-Zeichen. Es ist jedoch wichtig 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:

Die CSS-Klasse 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-Klasse direkt im <a>-Element verwendet wird, wird das <a>-Element als Icon gewertet. Beachte auch, 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 Dashicon ist konform, dasselbe:

Link mit Dashicon ist <a href="http://wegerl.at" target="_blank" rel="noopener"><i class="dashicons dashicons-admin-home" style="margin-top: 3px;"></i>konform</a>

Link mit Dashicon 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' );

Die Snippets zur functions.php ab ins Plug-in Code Snippets.
Mit Obhut der Codes! – so bleibt das auch nach Theme-Update.
Oder Childs Theme! – zum Beitrag Quick Child Theme Generator.
So zum Workflow und Browser Cache s. das Plug-in reBusted!

… 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.

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

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 Klassennamen 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 und so für PHP ist wie oben das mit den 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 gut erklärt wird.

Als Beispiel: Für eine Headerleiste waren weder die Dashicons noch die Genericons geeignet. Durch die Verwendung von Font Awesome und dem entsprechenden Code in der header.php (siehe vorherigen Abschnitt) konnten die gewünschten Icon-Fonts gefunden und eingebunden werden.

Eigene Icons erstellen oder bestehende verwenden

Es wird gezeigt, wie man SVG-Icons vorbereitet und als benutzerdefinierte Icon-Fonts in der Header-Leiste einbindet. Dazu kann 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

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 so …

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.