Ihr bewährter Begleiter.
Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.
Mehr Funktionen, mehr Möglichkeiten.
Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.
Der Classic-Editor für alle.
Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.
Der Advanced Editor für kreative Köpfe.
Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.
Icons sind kleine Piktogramme, die auf Websites verwendet werden. Icon-Fonts sind eine Schriftart, die anstelle von Bildern verwendet werden kann. Sie bieten den Vorteil, dass Farben und Skalierung einfach über CSS geändert werden können. Web- und Icon-Fonts sind ein komplexes Thema mit vielen Optionen, von Dashicons bis zu anderen Angeboten.
In diesem Beitrag geben wir Dir einen Überblick über die Verwendung von Icon-Fonts und zeigen, wie Du diese in deiner Website integrieren kannst. Ob Du ein Webdesigner, Entwickler oder einfach an Icon-Fonts interessiert bist, dieser Beitrag bietet Dir einen umfassenden Überblick.
Was sind Icon-Fonts?
Bevor in die Details gegangen wird, sollte zuerst die Definition von Icon-Fonts geklärt werden. Icon-Fonts sind eine Art von Schriftart, die aus Symbolen und Piktogrammen besteht, die anstelle von Bildern verwendet werden können.
Bei der Erstellung einer Website können Icon-Fonts wie Genericons oder Font Awesome verwendet werden, um das Erscheinungsbild der Website zu verbessern. Icon-Fonts bieten auch den Vorteil, dass sie einfach zu skalieren und zu ändern sind, und sie können über CSS gesteuert werden.
Internetkurse Köln so im Titel In WordPress externe Links markieren (Genericons und Font Awesome).
Die Unterscheidung der Icon-Fonts
In Bezug auf Icon-Fonts gibt es mehrere Optionen zur Verfügung. Zum Beispiel gibt es WordPress Dashicons und Automattic Genericons. Es gibt auch Genericons Neue, die als SVG-Icon ähnlich wie Font Awesome verwendet werden können.
Der Unterschied zwischen SVG und anderen Icon-Fonts besteht darin, dass SVG-Icons leicht verändert werden können. Wenn wir jedoch nur Icons benötigen, die als Schriftarten verwendet werden können, sind Dashicons und die normalen Genericons gute Optionen. Zusammenfassend gibt es drei Hauptoptionen für Icon-Fonts:
- Dashicons von WordPress und sind meist allein für Admin-Bereich vorgesehen.
- Genericons von Auttmattic und 'Genericons Neue'
- Font Awesome von Fonticons, Inc.
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.
Die Codes zum Einfügen über die header.php
sind HTML-Tags und diese enthalten 'link-Tag' und ’script-Tag'. Diese Tags laden die erforderlichen Ressourcen für die Verwendung der entsprechenden Icons auf der Webseite, indem sie auf die zugehörigen CSS- und JavaScript-Dateien verweisen.
– so wie es dann deiner Website, this is the best.
Ausgleich von Icon-Positionierung in Links
Icon-Sets oder die Standardstile von Symbolen in einer Website können standardmäßig eine leichte Verschiebung haben, die dazu führt, dass sie nicht perfekt auf der gleichen Höhe wie der Text in einem Link erscheinen. Das kann an unterschiedlichen Größen, Abständen oder Linienhöhen liegen, die für Icons und Texte individuell definiert sind.
Um diese Verschiebung auszugleichen, können spezifische Stiländerungen notwendig sein, wie z. B. die Anpassung des vertical-align
, margin
oder padding
. Das Ziel ist es, das Icon visuell auf die gleiche Höhe wie den Text zu bringen. Manchmal erfordert dies etwas Feinanpassung, je nachdem, wie das Symbol-Set oder die Stylesheets der Website konfiguriert sind.
Tab 1: Dashicons von WordPress
Tab 2: Genericons und 'Genericon Neue' von Automattic
Tab 3: Font Awesome von Fonticons, Inc.
Tab 4: Icon-Fonts selbstgemacht
Tab 5: Icons, auf die ich auch hinweisen möchte
Tab 1
Die Beispiele mit den Dashicons-Icons sind hier nicht sichtbar, da wir auf der Website statt der Dashicons die Genericons verwenden. Wenn das Theme, wie hier, die Genericons beinhaltet, sollte man diese auch entsprechend nutzen. Zudem sind die Genericons eine elegante Art von Icons, siehe Tab 2. Die folgenden Beispiele sind meist sichtbar und verwenden Genericons. Dies sollte zum besseren Gesamtverständnis beitragen.
Dashicons von WordPress
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.
Der "Preview-Modus" ist eine Funktion in Content-Management-Systemen (CMS) und anderen Webseitenbau-Tools, mit der Änderungen an einer bestimmten Seite oder einem bestimmten Beitrag vor dem Speichern und Veröffentlichen angezeigt werden können.
Die "Admin-Ansicht" bezieht sich auf die Ansicht einer Webseite oder eines Webseiten-Backends, wenn man als Administrator oder eingeloggter Benutzer angemeldet ist.
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.
- Auf der Seite dort ist auf Copy CSS zu klicken und
- 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>
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.
Tab 2: Genericons und 'Genericon Neue' von AutomatticTab 2
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.
- Download die Genericons ZIP-Datei
- Nach dem Download der
genericons.zip
-Datei (107 KB) ist diese zu Öffnen und der Ordnergenericons
(174 KB) in das Theme zu laden. - 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' );
functions.php
, CSS und JavaScript: das Child-Theme. Spezifisch, CSS+JS: das Plug-in Header Footer Code Manager. Zum Workflow und Browser Cache siehe 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.
<i class="genericon genericon-edit"></i>
Liste der generischen Unicode-Codes
…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
- 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.
- 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
Tab 3: Font Awesome von Fonticons, Inc.
Tab 3
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
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
Tab 4: Icon-Fonts selbstgemacht
Tab 4
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
Tab 5: Icons, auf die ich auch hinweisen möchte
Tab 5
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:
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.
- Hallo! Da ganz linksaußen das "". Das bin ich, das original SVG von <1 KB.
- 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.
- 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.
Und so andere Spielart von Externe Links mit Icon – so Base64 oder anderem SVG?
Viel Erfolg!
Der Beitrag wurde mit fachlicher Unterstützung erstellt.
Aktualisiert im Jahr 2024 April