Ihr habt sicher schon diese schönen Icons im Menubereich der Administration gesehen. Was ihr eventuell nicht wusstet ist, dass man noch viel mehr Icons zu verfügung hat. Das ist besonders interessant, wenn man an einem eigenen Plugin oder am WordPress Theme arbeitet. Dann kann man diese nämlich auch direkt einbinden.

Das geht auch ganz einfach.

1. Dash Icon auswählen
   Dazu geht man auf die Übersichtsseite der Dashicons. Dort sieht man eine grosse Grafik aller Dashicons.
   
2. Icon auswählen
   Danach kann man das Icon auswählen und wenn man seine Wahl getroffen hat, klickt man auf das Symbol. Dann sieht man oben folgendes:
   
3. HTML Code einfügen
   Nun kann man mit einem Klick auf „Copy HTML“ den HTML Code auslesen und dann im Theme oder Plugin einsetzen. So sieht das dann aus.

   1	<div class="dashicons dashicons-wordpress"></div>

   <div class="dashicons dashicons-wordpress"></div>

4. CSS Einfügen
   Nun mit einem klick auf „Copy CSS“ könnt ihr nun den CSS Selector auswählen.

   1	content: "f120";

   content: "f120";

   Wenn man das dann in euer CSS einfügt, könnte es so aussehen:

   1 2 3 4 5 6 7

   .dashicons-admin-plugins:before { content: "f120"; display: inline-block; color: #1EC9B3; -webkit-font-smoothing: antialiased; font: normal 150px/1 'dashicons'; }

   .dashicons-admin-plugins:before { content: "f120"; display: inline-block; color: #1EC9B3; -webkit-font-smoothing: antialiased; font: normal 150px/1 'dashicons'; }

Damit könnt ihr ganz einfach diese Dash-Icons verwenden.

Wenn ihr ein eigenes Theme entwickelt, dann müsst ihr aber die die Dash-icons noch zuerst bei euer Theme einlesen und das geht damit am einfachsten.

1
2
3
4

add_action( 'wp_enqueue_scripts', 'themename_scripts' );
function themename_scripts()
    wp_enqueue_style( 'themename-style', get_stylesheet_uri(), array( 'dashicons' ), '1.0' );
}

Mit diesen DashIcons könnt ihr euch so richtig schön austoben im Design des Theme oder einfach von Beiträgen, Listen, Punkte oder was auch immer.