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.
    Dashicon Übersichtsseite
  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:
    Dashicon Detail Ansicht
  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>
  4. CSS Einfügen
    Nun mit einem klick auf „Copy CSS“ könnt ihr nun den CSS Selector auswählen.

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

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.

Über

Eric-Oliver Mächler

Seit 2005 bin ich ein aktiver Blogger. Ich kenne die Kniffe und die Tricks um einen Blog erfolgreich zu machen. Hier gebe ich diese kleinen Tricks gerne weiter und freue mich, wenn ich euch helfen kann. Hier erfährt man mehr über mich.

1 Kommentar

Hinterlass einen Kommentar