Pezibear-eye-pony

Icon-Fonts! – Dashicons von WordPress vs. Genericons usw.

Das Bild so Pony! – das ist von Pezibear
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Classic und TinyMCE – ist so klasse!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit TinyMCE Advanced
"Classic und TinyMCE – ist das ausgezeichnete!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Classic und TinyMCE – ist so sehr gut !"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Classic und TinyMCE – und tut sehr gut!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

TinyMCE aktive Installationen: 2+ Millionen
"Classic und TinyMCE – ist so fabelhaft!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Classic und TinyMCE – ist de luxe!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Classic und TinyMCE – ist so fein!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Icons sind kleine Bilder oder Piktogramme für Websites. Icon-Fonts dafür sind Zeichensätze, die den Bildern Vorteile bieten. Zum Beispiel lassen sich Farbe und Skalierung im CSS ändern. Das Thema um die Web- bzw. Icon-Fonts wirkt aber sehr verschlungen. Nunmehr ist das der Fülle des Angebots von namens Dashicons bis … Indessen Beitrags ist zum Überblick und so mal auf den Punkt zu bringen. Im weiter den Anfängen ist das hier auch alles zur Funktion. Und nun an die Arbeit. – das Thema dann als [Gelöst]. – so bleib hier dran!

Die Unterscheidung der Icon-Fonts

So des Beginns sind WordPress namens Dashicons und das wär’s schon! Dann sind aber noch die Genericons von Automattic mit dazu 'Genericons Neue' so als SVG-Icon wie von Font Awesome? Des Letztren beiden das von SVG ist nur, dass man sie verändern kann. – wer’s, so braucht! Die Icons namens Dashicons und die normalen Genericons sind aber Schriftarten also gleich wie Text.

Das, welches hier im Beschrieb ist

  • Dashicons von WordPress
  • Genericons von Auttmattic und 'Genericons Neue'
  • Font Awesome

Zuerst das mit der Definition von Icon-Fonts

Das von Beschrieb der Web- bzw. Icon-Fonts und das ist zur Funktion schon sehr gut:

Internetkurse Köln so im Titel In WordPress externe Links markieren (Genericons und Font Awesome).

Internetkurse Köln
Internetkurse Köln: Eine Website ist keine Insel. Und wenn sie schon eine Insel sein will, sollte sie ein Eiland mit vielen Schifffahrtsrouten sein. Sprich: Jede Website sollte auf andere Websites verlinken.

Das von WordPress Dashicons sind 'generic' aber sind keine Genericons. Die Dashicons sind mit an Bord für 'wp-admin' und erst mal nur 'wp-admin' zu sehen. Der Admin sieht demnach die Website aus dem Dashboard heraus und somit auch die Dashicons, aber für den Besucher der Website sind diese noch nicht visuell! Das wird wohl deform meist so sein. Infolge Codes der Theme functions.php sind die Dashicons auch im Frontend.

Anders ist es der Genericons, die sind ganz gern auch mal in so Themes. So ist das dann für Frontend, sowohl für 'wp-admin am Frontend' als auch im Frontend für den Besucher.

Hingegen für Themes ohne Genericons sind diese mit Code in der Theme header.php einzubinden. Oder die Icon-Fonts im Theme einbinden.

Dasselbe kann auch für Font Awesome und all von Fonts sein.

Code in die header.php
vs. selbst Hosten

Selbst hosten macht immer dann Sinn, wenn man vor allem DSGVO-konform arbeiten möchte. Denn wenn das von extern eingebunden ist, weiß man nie, was da genau auf dem Zielserver passiert.

Sonst sind keine Nach- oder Vorteile. Klar, es werden mit einbinden mehr Daten geladen. Aber die sind in der Regel nicht zu beachten.

– so wie es dann deiner Website, this is the best.

Tab-Menü

Tab 1: Dashicons
Tab 2: Genericons und das mit 'Genericon Neue'
Tab 3: Font Awesome
Tab 4: Icon-Fonts selbstgemacht
Tab 5: Welches ist noch so?

Tab 1

 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

WP Dashicons external

  1. Auf der Seite dort ist auf Copy CSS zu klicken und
  2. 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

Das Dashicon so das HTML falsch
Die Ansicht so Dashicon des 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>

 

Tab 2

 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

…dabei ist hier scrolle

wojnowski.net.pl / Genericons unicode codes list

 


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

Tab 3

 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

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


Tab 4

Icon-Fonts selbstgemacht

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

 

Beispiel von Icon-Fonts in der Headerleiste

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

Bildschirmfoto, Beispiel von Menü

Tab 5

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

iconiFy.DESiGN
https://icon-sets.iconify.design/dashicons/smiley/

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

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

https://icons.getbootstrap.com/

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 "Icon". Das bin ich, das original SVG von <1 KB.
  2. Variiert bin ich nun ein SVG von 2 KB → Icon. – 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 Icon passen, die dir passt.

– klick mich Icon 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 Mein Icon

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.


Und so andere Spielart von Externe Links mit Icon – so Base64 oder anderem SVG?

 

Viel Erfolg!


Aktualisiert im Jahr 2023-März