Dashicons

• Developer Resources: Dashicons

Die Dashicons von WordPress

Die Dashicons sind für innerhalb von WordPress Core schon da. So sind diese auch dem Admin visuell. Der Admin sieht demnach die Website aus dem Dashboard heraus (Preview-Modus) und somit auch die Dashicons, aber für den Besucher der Website sind diese nicht visuell! Und so sollte das auch des Besuchers im Frontend sein?

• Infolge von separaten Code in der Theme functions.php sind die Dashicons auch im Frontend.

Die WP-Dashicons auch im Frontend

Das Folgende ist zu verwenden und das sollte funktionieren.

Theme functions.php

/* WordPress Dashicons Frontend */
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.

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;
  }

Also das fluchten 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 ↑.

PHP-Code Beispiel des Dashicons

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

Die Dashicons sind im Grunde der Auszeichnung über CSS, dort wo die Class des mehreren ist. Eben des beispiels das mit so Download-Zeichen ist nur dort und da mal in Gebrauch. Somit ist das Dashicon auch über HTML zu zeigen. Aber da ist erst mal draufzukommen, wie so des Beispiels das ist.

Dashicon und HTML falsch

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

Dashicon und HTML richtig

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

… zum Beispiel:

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

So ist das Icon vor dem Text gezeigt. Denn wenn die CSS-Klasse direkt im <a>,  dann wird das <a>-Element als Icon gewertet.

^{Pr. WP-Freund}

Anmerkung: Eben so <i class=  das funktioniert anders so mit <span class= nicht bzw. im Umschalten zum Editor 'Visuell' wird das gelöscht.

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: 7px;"></i>konform</a>

Link mit Dashicon ist konform

Und: Smiley zwar nicht Response zentriert

<div class="dashicons dashicons-smiley" style="font-size:40px; margin-left: 215px;"></div>

 Genericons

Die Genericons sind von Automattic und ist nicht Teil von WordPress. Aber einige Themes haben den Ordner genericons und somit ist das ohne Definition in der header.php.

Themes ohne den Ordner genericons

• Der Genericons bedarf es dann Code in der header.php. Das ist am besten vor dem schließendem </head>-Tag, das ist bzgl. Pagespeed.

In Anmerkung: Für die Leute, welche die Website mit Handy aufrufen ist das, da dann extra Datenvolumen verbraucht wird. … die Bemerkung ist feinst von diffizil.

<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

Selbst Hosten die Genericons

Bspw Theme Twenty Fourteen ist das inklusive. Für anderes Theme, welche die Genericons nicht dabei dazu ist hier Download vom Verzeichnis genericons, aber da sind noch nicht alle dabei! – weiter siehe unterhalb.

So ist erst mal das, um den Ordner genericons zu haben. – so wie es sich gehört–.

In drei Schritten

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 ist die Website https://www.jsdelivr.com/package/npm/genericons und dort würd ich das dann kopieren. Oder auch gleich so https://cdn.jsdelivr.net/npm/genericons@1.0.1/genericons/genericons.min.css. Da zurzeit ist das bspw 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 hats auch noch SinN, das 🙂

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

Website https://genericons.com/.

• Das mit 'Genericons Neue' ist mehr für Web-Designer als für den normalen Nutzer.

'Genericons Neue' verwenden

1. Um die Icon-Font 'Generions Neue' zu verwenden ist das dort auf GitHub https://github.com/Automattic/genericons-neue/tree/master/icon-font  herunterzuladen und auf dem Server im Theme zu speichern.
2. In der folgenden HTML-Datei ist zu sehen, um die Icons in einem Projekt zu verwenden: https://github.com/Automattic/genericons-neue/blob/master/icon-font/Genericons-Neue.html

^{Pr. WP-Freund}

 Font Awesome

Website: https://fontawesome.com/.

Zur Anwendung ist separate Definition in der header.php. – oder die Icons im Theme einbinden.

Font Awesome
durch Code in der header.php

• Der Font Awesome ist das in der Theme header.php im <head> zu definieren. Das ist am besten vor dem schließendem </head>-Tag, das ist bzgl. Pagespeed.

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

Hosten Sie Font Awesome selbst

• 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

• Das ist sehr gut im Beschrieb mit dem folgenden Tutorial: Eigene Icons und einen Icon-Font erstellen

Beispiel

Folgend des Beispiels von Headerleiste waren die Icon-Fonts weder als Dashicons noch der Genericons zu finden. Dann der Methode Font Awesome mit so Code in der header.php (siehe vorhergehenden Tab) waren die gefragten Icon-Fonts zu finden und konform.

Eigene Icons erstellen oder bestehende verwenden

Im Anders ist hier gezeigt wie so SVGs vorbereiteten Icons dann als eigene Icon-Fonts in der Hederleiste eingebunden wurden. Dazu ist obigen Links zu folgen.

Also ich habe die beiden Icons von icon-icons.com/de/. Der Suche oben bspw "dark" oder "dunkel"  bzw "hell /dunkel" und "lesen" war zu finden. Das richtige Icon anklicken und als  SVG downladen.  Dann war die Website IcoMoon aufzusuchen.

• 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 welches noch so hinzuweisen ist

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 Angebote

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:

So Unicode wie hier das Symbol ⟳ zum Update, s. https://www.compart.com/en/unicode/U+27F3 und Übersicht von anderer Zeichen ist https://www.vioma.de/de/wiki/tools/html-sonderzeichen/ sehr gut! Des Letzteren das Zeichen des vorhergehenden Link ist aber da nicht dabei.