WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse

Dash Icon in WordPress direkt einbauen

von | Dez 17, 2013 | Technik | 0 Kommentare

Schlagwörter:

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.





0 Kommentare

Trackbacks/Pingbacks

  1. Wie man Links extra markiert - […] möchte ich euch kurz zeigen, wie man sowas auch hier im Blog machen kann. Ich benütze dazu die Dashincons…

Antworten auf Wie man Links extra markiert Antworten abbrechen

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