Dashicons von WordPress vs. Genericons! – Font Awesome?

Das Thema um die Web- bzw. Iconfonts mag sehr zerstreut sein. Indes Beitrags ist das zum Überblick und so mal auf den Punkt zu bringen. – Das von Iconfonts gibt es des mehr … So des Beginns sind WordPress namens Dashicons und das ist schon das! – dann sind hier noch die Genericons von Automattic und so als SVG-Icon von Font Awesome. Des Letztren das von SVG ist nur, dass man sie verändern kann. – wer`s so braucht? – bitteschön . Die Icons namens Dashicons und die normalen Genericons sind aber Schriftarten also gleich wie Text. Im weiter den Anfängen ist das hier auch zur Funktion. Und nun an die Arbeit.

Die Unterscheidung der Iconfonts

Die Iconfonts so am meisten genützt.

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

Zuerst ist der Definition, was die Web- bzw. Iconfonts sind und ist des Leitfadens wie zur Funktion 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 namens Dashicons sind ‚generic‘ aber sind keine Genericons. Die Dashicons sind mit an Bord für ‚wp-admin‘ und erst mal nur ‚Backends am Frontend‘. 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 WordPress Theme … Somit heißt das sehr wohl, das ist ‚Backends am Frontend‘ und im Frontend.

Frontend = die Website, der Besucher. – nicht als wp-admin.
WordPress Admin, Backend = wp-admin.
‚Backends am Frontend‘ = wp-admin am Frontend.

Auch das wäre nicht zu korrekt, da Backend eigentlich die Struktur und Technik im Hintergrund ist, aber viele „WordPress’ler“ verwenden das Wort Backend für den Adminbereich.

Gut-zu-Wissen! – einfach schön.

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

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.

 Dashicons 

Die Dashicons von WordPress

Die Dashicons sind für innerhalb von WordPress Core schon da. So sind diese auch ‚Backends am Frontend‘ und so sollte das auch im Frontend sein.

  • Infolge von separaten Code in der Theme functions.php sind die Dashicons auch im Frontend.  Dasselbe gilt für ClassicPress.

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.

Beispiel das Dashicon für externe Links CSS

  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 ist das aber über CSS.

Beispiel das Dashicons im PHP-Code

  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');
}
?>

Beispiel von HTML

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.

[kevin.p]

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: 190px;"></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' );

[codesnippets]

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

Liste der generischen Unicode-Codes

…dabei ist hier scrolle

wojnowski.net.pl / Genericons unicode codes list

 

… und genug des Guten.

Im anders ist das als Merkzettel:

 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>

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

… und genug des Guten.

Im anders ist das als Merkzettel

Und auf welches noch so hinzuweisen

Es gibt unzählige Web- bzw. Iconfonts, die man für seine Website verwenden kann, siehe: https://www.webfx.com/blog/web-design/free-icon-fonts/ (englisch).

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
da so SVG sind von Nutzen!

Ich bin ein SVG von nicht mal 1 KB
Ich bin ein SVG von 1 KB. – klick mich an.

 

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

Variiert bin ich nun ein SVG von 2 KB. – klick mich an, es geht immer noch größer, gleicher Qualität.

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

 

Viel Erfolg!