Wordpress Performance Wordpress SEO Wordpress Security Wordpress Themes Wordpress Hosting Mein Setup Das Buch

Icon Fonts im Artikel nutzen (ohne Plugin)

Icon Fonts im Artikel nutzen ohne Plugin

Icon Fonts ohne Plugin nutzen

Auch wenn Icon Fonts im Zuge des aktuellen Trend in Richtung Performance schon wieder ein wenig dezenter eingesetzt werden und der große Siegeszug von Font Awesome auch schon ein Weilchen her ist, so sind Icon Fonts dennoch nach wie vor eine gute Möglichkeit das eigene Theme entsprechend aufzuwerten. Auch in Artikeln machen sich Symbole häufig sehr gut und können, richtig eingesetzt, das Auge des Lesers auf sich ziehen und so den Absätzen mehr Gewichtung und Bedeutung verleihen. Wie ihr Font Awesome ohne ein Plugin nutzt und zwar so, dass ihr die Icon Font direkt im Editor verwenden könnt, möchte ich euch in diesem Beitrag zeigen. Natürlich geht das prinzipiell mit jeder Icon Font, ihr müsst dann nur den Link im Code unten entsprechend abändern.

Font Awesome im Artikel nutzen

In diesem Beispiel zeige ich euch anhand von Font Awesome, wie ihr Icon Fonts direkt im Artikel verwenden könnt. Das Unterschied zu den Plugins ist, dass ihr die Font direkt einbindet und dann die Icons per Hand in den Artikel einbaut. So verzichtet ihr auf eine Erweiterung, die nur unnötige Ressourcen fressen würde und integriert eine schlanke, effiziente Lösung.

1. Als erstes folgendes Snippet in die Functions.php einfügen. Das sorgt dafür, dass die Icon Font (in diesem Fall Font Awesome) auch im Editor geladen und entsprechend angezeigt wird. Andernfalls würdet ihr das Icon im Editor von WordPress gar nicht sehen.

add_action( 'init', 'prefix_add_editor_styles' );
function prefix_add_editor_styles() {
    add_editor_style( 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css' );
}

2. Jetzt muss Font Awesome natürlich auch noch im eigentlichen Blog geladen werden. Dafür einfach den aktuellen Code von CDNJS (kostenloses CDN) verwenden und in die Footer.php vor das schließende “</body>” -Tag einfügen. Damit wird die Icon Font erst ganz am Schluss geladen.

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css

3. Das war es dann auch schon. Jetzt könnt ihr Font Awesome innerhalb der Beiträge nutzen. Einfach den Code eines Icons im Text-Modus des Editors einfügen und dann entsprechend formatieren und anpassen. Die Codes zur Anzeige der Icons sehen dann ungefähr so aus.

<i>icon-code</i>

Saubere Lösung ohne Plugin

Im Grunde war das wirklich schon alles. Natürlich ist es mit dieser Hardcode-Lösung nicht möglich, Icons über einen hübschen Button im Editor zu integrieren, doch das braucht im Normalfall auch niemand. Hin und wieder werden die Icons verwendet und nur dafür extra eine aufwändige Lösung bereitzustellen, lohnt sich einfach nicht. Da reicht es doch, die Icons im Text-Modus des Editors von Hand einzufügen, sie dort zu formatieren und dafür auf entsprechend viel Code bzw. ein zusätzliches Plugin verzichten zu können. Schnell und effizient, ohne all den unnötigen Kram drumherum.



Wordpress Performance eBook