• Zur Hauptnavigation springen
  • Skip to main content
  • Zur Hauptsidebar springen
  • Zur Fußzeile springen
Thx Cool

Thx Cool

  • Softwareentwicklung
  • SEO
  • Content Marketing
  • Hosting
  • Beratung
  • Bibliothek
    • WordPress
    • Genesis
    • MacOS
    • Linux
    • Python
    • Magento
    • Sicherheit
    • SEO

Dashicons im WordPress Frontend aktivieren

21. November 2018 von Kai Hagemeister

Verschönere Deine WordPress Seite durch die Aktivierung der Dashicons im Frontend. Ich zeige Dir, wie Du sie aktivierst und in den Metadaten oder an beliebigen Stellen Deiner Seite platzierst.

Was sind Dashicons?

Seit der WordPressversion 3.8 sind Dashicons die offizielle Symbolschriftart im Adminbreich jeder WordPressinstallation. Die kleinen Icons sind Dir sicher schon aufgefallen. Du findest Sie beispieweise vor den Menüeinträgen.

Dashicons im Frontend aktivieren

Um Dashicons im Frontend zu aktivieren, muss ein Eintrag in der Datei functions.php Deines Themes erfolgen. Du findest diese Datei im Administrationsbereich Deiner WordPressinstallation unter:

Design  Editor

unter

Theme-Dateien  Theme Funktionen

Beachte, dass Du mit einem Fehler in der functions.php einen White Screen of Death verursachen kannst. Daher empfehle ich Dir, Deine functions.php auf Dateiebene zu ändern. Du findest sie unter:

wp-content/themes/DeinTheme/functions.php

Es versteht sich von selbst, dass „DeinTheme“ durch den Namen des von Dir verwendeten Themes ersetzt werden muss.

An das Ende Deiner functions.php kopierst Du folgenden Quellcode:


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

Der erste Teil ist eine Funktion. In Ihr wird die Symbolschriftart registriert. In der darauf folgenden Action-Anweisung wird dem Hook wp_enqueue_scripts die Symbolschriftart (Style) übergeben. wp_enqueue_scripts ist der Hook zur Anzeige im Frontend Deiner Seite. Ähnlich kann beispielsweise auch die style.css Deines Themes zur Verwendung im Frontend mitgeteilt werden.

Nach dem Einfügen und Speichern ist kannst Du Dashicons in Deinem Frontend verwenden.

Welche Dashicons gibt es?

Die Anzahl der Dashicons wird kontinuierlich erweitert. Unter GitHub kannst Du selber Vorschläge für künftige Dashicons einbringen. Eine Liste der derzeit verfügbaren Dashicons findest Du unter: Liste der verfügbaren Dashicons.

Dashicons in Blogartikeln oder Seiten verwenden

In Deinen Seiten und Beiträgen kannst Du Dashicons ganz einfach verwenden. Du stellst Deinen Editor auf Textmode und kopierst sie in Deinen Beitrag. Dafür kannst Du verschiedene HTML-Tags nutzen. Wichtig ist lediglich die Angabe der Klasse Dashicon, gefolgt vom korrekten Namen des Dashicons.


<i class="dashicons dashicons-name"></i>
<span class="dashicons dashicons-name"></span>

Beispiel Dashicon Laptop:


<i class="dashicons dashicons-laptop"></i>  
<span class="dashicons dashicons-laptop"></span> 

Wie Du siehst, ist die Ausgabe identisch. Es bleibt Dir überlassen, welche HTML-Tags Du verwendest.

Du kannst Deine Dashicons beliebig weiter anpassen. So könntest Du den Laptop blau färben und vergrößern:


<i class="dashicons dashicons-laptop"
   style="color:darkblue;font-size:4em;"></i>   


Dashicons in den Metadaten verwenden

Unter Metadaten sind hier die Informationen zu verstehen, die kurz vor Deinen Beiträgen stehen. Also Datum, Autor und Kommentar. Du kannst Dashicons auch in diesen Metadaten verwenden. Beispielsweise als Icon vor dem Datum und dem Autor eines Artikels. Wie Du die Metadaten Deiner Beiträge ändern kannst, erfährst Du in eigenen Artikeln.

WordPress Genesis: Post Meta bearbeiten oder entfernen

WordPress: Datum und Autor bearbeiten oder löschen

Kategorie: Wordpress Stichworte: Dashicons, Wordpress

Über Kai Hagemeister

Studium der Biologie. Anschliessendes Studium der Informatik. Seit 2009 betreibe ich mit meiner Familie einen kleinen Hof in den Thüringer Bergen. Ein Blog begleitet unsere Arbeit auf dem Berghof.

Leser-Interaktionen

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Haupt-Sidebar

Bibliothek

  • Blog (2)
  • Linux (9)
  • MacOS (8)
    • Python (1)
  • Magento (5)
  • Netzwerk (2)
  • SEO (2)
  • Sicherheit (5)
  • Wordpress (16)
    • Genesis (5)

Neueste Beiträge

  • SIP deaktivieren
  • Firefox verbindet sich zu Cloudfront und Amazon
  • apsd Prozess unter MacOS deaktivieren
  • Firefox lässt sich nicht mehr starten
  • Wortmann Terra mobile kein AHCI

Lass Dir eine coole Webseite erstellen

THX bietet Dir alles was Du Dir für Deinen erfolgreichen Auftritt im Internet wünschst.

Kontakt aufnehmen
hosting

Lass Dir Deine coole Webseite von THX erstellen

Kontakt

Footer

Kontakt

  • Webseite
  • Email
  • Telephone

Navigation

  • Softwareentwicklung
  • SEO
  • Content Marketing
  • Hosting
  • Beratung
  • Blog

THX.cool

  • Impressum
  • Datenschutz
  • Cookie-Richtlinie (EU)

Newsletter

Copyright © 2023 Kai Hagemeister THX.cool

Cookie-Zustimmung verwalten
Wir verwenden Cookies, um unsere Website und unseren Service zu optimieren.
Funktional Immer aktiv
Die technische Speicherung oder der Zugang ist unbedingt erforderlich für den rechtmäßigen Zweck, die Nutzung eines bestimmten Dienstes zu ermöglichen, der vom Teilnehmer oder Nutzer ausdrücklich gewünscht wird, oder für den alleinigen Zweck, die Übertragung einer Nachricht über ein elektronisches Kommunikationsnetz durchzuführen.
Vorlieben
Die technische Speicherung oder der Zugriff ist für den rechtmäßigen Zweck der Speicherung von Präferenzen erforderlich, die nicht vom Abonnenten oder Benutzer angefordert wurden.
Statistiken
Die technische Speicherung oder der Zugriff, der ausschließlich zu statistischen Zwecken erfolgt. Die technische Speicherung oder der Zugriff, der ausschließlich zu anonymen statistischen Zwecken verwendet wird. Ohne eine Vorladung, die freiwillige Zustimmung deines Internetdienstanbieters oder zusätzliche Aufzeichnungen von Dritten können die zu diesem Zweck gespeicherten oder abgerufenen Informationen allein in der Regel nicht dazu verwendet werden, dich zu identifizieren.
Marketing
Die technische Speicherung oder der Zugriff ist erforderlich, um Nutzerprofile zu erstellen, um Werbung zu versenden oder um den Nutzer auf einer Website oder über mehrere Websites hinweg zu ähnlichen Marketingzwecken zu verfolgen.
Optionen verwalten Dienste verwalten Anbieter verwalten Lese mehr über diese Zwecke
Einstellungen anzeigen
{title} {title} {title}