Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
Pezibear-eye-pony
smilies.4-user.de

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

Das Bild so Pony! – das ist von Pezibear
Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.  Info


Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)


Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.




Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.


Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept


Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.




Werbung

Einfach und intuitiv –
Der Classic-Editor für alle. Info


Classic Editor & Advanced Editor Tools
Erleben Sie es.


Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.




Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.


Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools


Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.





Info echo1 OpenClipart-Vectors-katze-1
Ist der Classic-Editor zu kennen? –
Versäume bitte nicht den Advanced Editor! Blick in die Zukunft: Advanced Editor Tools
Info echo2 OpenClipart-Vectors-katze-2
Classic-Editor – Classic Widgets
"Innovativ und ausgezeichnet!" Hauch von Nostalgie: Classic Widgets
Info echo3 OpenClipart-Vectors-katze-3
Klassischen Editor! – und …
"Advanced Editor Tools" Dauerhaft dynamisch: Advanced Editor Tools
Info echo4 OpenClipart-Vectors-katze-7
… die Welt gehört dem, der sie genießt.
– mit Classic Editor und Advanced Tools! Advanced Editor Tools und Classic Widgets
Info echo5 OpenClipart-Vectors-katze-4
Aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist fabelhaft!" Unverändert exzellent: Advanced Editor Tools
Info echo6 OpenClipart-Vectors-katze-5
Antörnend! – hier zur Lancierung
"Advanced Editor Tools – ist de luxe!" Classic Editor und Advanced Editor Tools
Info echo7 OpenClipart-Vectors-katze-6
Classic Widgets sind innovativ!
"Classic Widgets – sind modern!" Advanced Editor ToolsClassic Widgets
Info echo8 OpenClipart-Vectors-katze-8a
"Werkraum ist Werkraum"
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Frontend ist Frontend!" Classic Editor und Advanced Editor Tools

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

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.

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

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

  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";
    display: inline-block;
    line-height: 1;
    font-size: 1em;
    color: red;
}

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

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>

admin-home

HTML Beispiel des Dashicons

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:

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>

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 Dashicon ist konform, dasselbe:

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

Link mit Dashicon ist konform.

Dem obigen Beispiel über HTML dasselbe per CSS:

.wp-dc {
    display: inline-block;
    line-height: 1;
}

… und das HTML

Link mit Dashicon ist <a class="wp-dc" href="http://wegerl.at" target="_blank" rel="noopener"><i class="dashicons dashicons-admin-home"></i>konform</a>.

Link mit Dashicon ist konform.

Icon im Textverlauf per CSS wie oben und Smiley Dashicon per HTML:

Ich wünsche dir: <span class="wp-dc"> <i class="dashicons dashicons-welcome-learn-more"></i> viel Erfolg!</span> <i class="dashicons dashicons-smiley" style="font-size: 1.2em; margin-top: 5px;"></i>

Ich wünsche dir: viel Erfolg!

/* Dashicon vor Text mit 'before' */
<h2 class="dashicons-before dashicons-smiley">Eine fröhliche Überschrift</h2>

/* Dashicon nach Text funktioniert im HTML nicht mit 'after' */
<h2>Eine fröhliche Überschrift <i class="dashicons dashicons-smiley" style="font-size: 1.1em; margin-top: -5px;"></i></h2>

Dashicons in PHP-Code einbinden

Dashicons in PHP-Code wie er diesem Beitrag Aktualisierungsdatum – WP Last Modified Info hervorgeht.

In diesem Abschnitt wird erläutert, 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"></span>

Das ist mit Zeichen für Update dashicons-update und einmal mit einem Kalender dashicons-calendar-alt:

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

Tab 2: Genericons und 'Genericon Neue' von Automattic

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

  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 in das Plug-in Code Snippets.
Mit Obhut von Codes! – so bleibt das auch nach Theme-Update.
Oder Child Theme! – zum Beispiel 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

…dabei ist hier scrolle

wojnowski.net.pl / Genericons unicode codes list

 


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



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

https://icons.getbootstrap.com/

Die Bootstrap Icons …

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

wp wegerl.at

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