Lesefortschritt:

DashIcons – die Alternative zu Font Awesome

25. Januar 2021 | CSS-Stylesheet, Fonts & Icons, WordPress

Dieser Beitrag beinhaltet 583 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.

Vor kurzem haben wir Ihnen gezeigt, wie Sie Font-Awesome-Icons auf Ihrer Website verwenden. Es gibt aber noch eine Alternative, welche direkt in WordPress sitzt. Die so genannten Dash-Icons auf der Website einzusetzen ist ebenfalls nicht schwierig und durchaus eine Alternative.

Vielleicht haben Sie unseren Beitrag zur Einbindung der Font-Awesome-Icons bereits gelesen. Heute möchten wir Ihnen mit den DashIcons von WordPress eine Alternative vorstellen.

Diese Icons, welche Sie aus dem Backend Ihrer WordPress-Site bereits kennen, lassen sich ebenfalls ganz einfach im Frontend verwenden. dafür müssen Sie bloss einige Zeilen Code in Ihre functions.php einfügen. Diese finden Sie unter Design/Theme.-Editor. Dort fügen Sie folgenden Code ein:

function load_dashicons_front_end(){
     wp_enqueue_style('dashicons');
}
add_action('wp_enqueue_scripts','load_dashicons_front_end');

Damit ist Ihre WordPress-Site bereits DashIcon-tauglich. Machen wir die Probe aufs Exempel.

Fügen Sie zum Beispiel folgenden HTML-Text in einen Beitrag ein: Tun Sie dies im WordPress-Editor unbedingt in der HTML-Ansicht, ansonsten erhalten Sie nicht das gewünschte Resultat.

<i class="dashicons dashicons-paperclip"></i>

Dies sollte Ihnen die Büroklammer anzeigen. Klappt es bei Ihnen auch?

Eine vollständige Liste aller verfügbaren DashIcons finden Sie unter diesem Link. Die Auswahl ist zugegebenermassen nicht ganz so umfangreich wie bei Font Awesome. Den Code nach obigem Muster erhalten Sie, wenn Sie beim Icon auf «Copy HTML» klicken.

Wenn Sie die DashIcons auch via CSS-Stylesheet einbinden möchten, gelingt Ihnen dies ähnlich einfach wie bei der Konkurrenz.

Vergeben Sie zunächst dem Textblock, Link oder Button eine CSS-Klasse. In unserem Beispiel hier nenne ich diese mal

coffee

Nun suchen Sie unter diesem Link Ihr gewünschtes Icon. Rufen Sie es auf und klicken Sie diesmal auf «Copy CSS».. Den hier angegebenen Code werden Sie gleich benötigen.

Jetzt öffnen Sie Ihr CSS-Stylesheet unter Design/Customizer/Zusätzliches CSS und geben folgenden (natürlich beispielhaften) Code ein:

.coffee:before{
  font-family: "dashicons";
  content: "\f16f";
}
Sie sehen: Zunächst wird meine Klasse «coffee» aufgerufen und der Font «dashicons» zugewiesen. die kryptische Zeichenfolge im «content» habe ich dem CSS-Code meines Icons entnommen.

Es ergibt eine Kaffee, welche ich mir nun sogleich gönnen werde.

Übrigens: Eine weitere Font-Awesome-Alternative sind die Google-Icons, welche wir Ihnen im Beitrag «Google-Icons einbinden und nutzen» vorstellen.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This