Conterest ツ

Clever Bloggen

  • Blogtipps
  • Blogstart
    • Anleitung in 18 Schritten
    • Blog schreiben für Einsteiger
  • Blogtraffic
  • Gratisbuch
  • Archiv
    • Liste absolut aller Blogbeiträge
  • 1001 Gründe
    • Warum es gut und richtig ist ein Blogger zu sein

Wie du mit Iconfonts und Wordpress prachtvolle Inhalte erstellst 💠

Erschienen 19.01.2016 | von Sven E. Lennartz |

  • merken  106 
  • teilen  
  • twittern  
  • teilen 

Wie du mit Iconfonts und Wordpress prachtvolle Inhalte erstellst

Leserfrage:

Apropos ... kennst du schon mein Buch?

Bildungssprache Buch CoverNEU! Wörter der Bildungssprache und was sie bedeuten. Hier ist das praktische Handbuch schlauer Wörter. Über 500 Begriffe aus der Bildungssprache, erläutert und mit Beispielen für den praktischen Einsatz oder mit Zitaten versehen. Texte besser verstehen und schlauer schreiben. Mehr erfahren

„Wie bekomme ich Icons und Symbole in eine Überschrift“?

„Oh, das ist einfach, wenn du einen Iconfont benutzt“.

Inhaltsverzeichnis

  • Iconfonts und [icon id=“wordpress“] Wordpress
  • H3 Überschrift mit [icon id=“wordpress“] Wordpress Icon
  • Wordpress Plugins für das Blog
  • Haben Iconfonts Nachteile?
  • SVG

Iconfonts und [icon id=“wordpress“] Wordpress

Früher gab es nur eine sinnvolle Möglichkeit Icons einzusetzen, man verwendete eine Bilddatei. Iconsammlungen wurden deshalb mit Grafiken in verschiedenen Größen geliefert. Damit musste man auskommen. Heute geht viel mehr.

Sprites und SVG heißen solche Zauberworte. Da man längst beliebige Fonts in Blogs einbinden kann, sofern man über die entsprechenden Lizenzen verfügt, sind auch die guten alten Dingbats möglich. Außerdem können Emojis zum Einsatz kommen. Die funktionieren immer besser und ordentlich Auswahl hat man auch. Ich setze sie immer häufiger für die Seitentitel ein.

An dieser Stelle möchte ich mich aber auf Iconfonts beschränken. Weil sie so einfach zu benutzen sind. Mehr braucht man in der Regel auch gar nicht.

fontawesome

Was ist ein Iconfont? Eine Schriftart (Font), die statt Buchstaben und Zeichen eben Icons enthält. Man setzt sie genau so ein, wie man es mit einer beliebigen Schrift tut. Das heißt, man kann Größen, Farben, Schatten, Hintergründe verändern, kann Unterstreichungen und so weiter benutzen.

Iconfonts sind herkömmlichen Grafiken überlegen. Sie sind flexibler, beliebig skalierbar und passen sich modernen Techniken besser an (Stichwort Retina & Responsive). Icon Fonts sehen immer gut aus, egal welchen Bildschirm der Besucher hat. Grafiken sind im Zweifel allerdings immer noch ein ganzes Stück prächtiger.

Alles, was man mit CSS machen kann, kann man auch mit Iconfonts tun. Das ist nicht mal wenig. Allerdings geht es mir an dieser Stelle nicht um spezielle Basteleien, wie man sie zum Beispiel auf codepen.io finden kann. Iconfonts lassen sich nämlich auch animieren, mehrfarbig darstellen oder als Hintergrundgrafiken verwenden. Spannende Sachen, aber dann doch eher für Fortgeschrittene.

H3 Überschrift mit [icon id=“wordpress“] Wordpress Icon

Im Fließtext [icon id=“wordpress“] mit Farbe.

Im Fließtext [icon id=“wordpress“] ohne Farbe.

[icon id=“wordpress“] 200% Textgröße
[icon id=“wordpress“] 500% Textgröße
[icon id=“wordpress“] 80px Textgröße
Oder hier zum Beispiel mit Rahmen und Hintergrundfarbe

[icon id=“wordpress“]

Der bekannteste Iconfont ist Font Awesome. Es gibt ihn mittlerweile in der vierten Inkarnation. Satte 989 Icons sind in der Gratisversion des Fonts enthalten (Stand 04/2018) – 1718 gibts dazu noch gegen Bezahlung. Damit lässt sich einiges auf die Beine stellen. Font Awesome ist anwendungsfreundlicherweise Open Source und auch bei Benutzung in kommerziellen Produkten völlig kostenlos. Es gibt Updates, neue Icons kommen in unregelmäßigen Abständen hinzu.

fontawesome

Es gibt mehr. Einige bekannte Beispiele:

  • Genericons
  • IcoMoon
  • Fontastic
  • Octicons
  • Typicons
  • Payment Webfont
  • Foundation
  • We Love Icon Fonts – ein Icon Fonts Hosting Service

Wordpress Plugins für das Blog

Icon Fonts können auf klassische Weise verwendet werden. Dazu wird der Font aus einer geeigneten Quelle importiert und das gewünschte Bild per CSS eingefügt. Wordpress hat für so etwas natürlich Plugins. Man muss nichts manuell einbinden und kann das gewünschte Icon bequem über den Editor auswählen und einfügen.

Tatsächlich nutzt Wordpress sogar schon von Haus aus einen Iconfont. Die sogenannten Dashicons, man findet sie im Admin Menü, manche Themes verwenden sie zur illustrativen Unterscheidung von Formatvorlagen oder für das Hamburg Icon in mobilen Menüs. Leider lassen sich diese Icons nicht direkt innerhalb eines Postings verwenden. Wer sich trotzdem daran versuchen will, hier ist eine Anleitung.

Plugins werden reichlich angeboten. Erforsche das Plugin Directory, um noch mehr aufzuspüren. Alle unten erwähnten Plugins sind kostenlos und auf englisch.

WP Visual Icon Fonts
Stellt Icons aus Font Awesome und Genericons in einem Dropdown-Menü zur Verfügung.

wp-visual

Noch wilder treibt es Icon Fonts, hier werden gleich 18 Iconsets bereitgestellt.

Better Font Awesome
muss gar nicht gross erklärt werden. Auch diese Plugin klinkt sich in die Menüleiste des Editors ein und macht auf diese Weise Font Awesome verfügbar.

AGP Font Awesome Collection
Der Font Awesome Constructor bietet einen Eingabemaske in der man sich Icons und Buttons zusammenklicken kann. Das klingt prima, gerade für weniger erfahrene Blogger. Allerdings verwirrt die Vielzahl der Optionen wohl mehr, als sie nützt.

agp-font-awesome

Font Awesome 4 Menus
erlaubt es Icons in den Wordpress Menüs unterzubringen. Das habe ich auch probiert und oben in der Hauptnavigation bei Conterest Icons eingefügt. Schau es dir hier live an. Eine ähnliche Funktion bietet Menu Icons – mit noch größerer Auswahl.

conterest-menu

Haben Iconfonts Nachteile?

  • Die zusätzliche Datei muss stets geladen werden. Man wird das selbst kaum bemerken, doch solche Dinge sammeln sich an. Das läppert sich. Ob man den Einsatz rechtfertigen kann, muss jeder selbst entscheiden. Wenn dein Blog flott unterwegs ist, mag der zusätzliche Font nicht ins Gewicht fallen. Mich stört es hier jedenfalls nicht.
  • Die größere Gefahr versteckt sich in den Shortcodes. Will man das Plugin oder den Font wechseln oder muss das vielleicht sogar, dann würden die Shortcodes in den Postings zurückbleiben. Dessen sollte man sich bewusst sein. Die Codes müssen unter Umständen mit Suchen & Ersetzen entfernt werden – jedenfalls bei häufigem Gebrauch.
  • Auch bei der automatischen Weiterverarbeitung von Beiträgen oder Texten können die Shortcodes stören. Sie werden dann nicht mit in ein Icon übersetzt, sondern als sinnloser Quellcode dargestellt.
  • Alte Browser zeigen die Icons nicht an. Das softwaretechnische Alteisen versagt aber auch in vielen anderen Dingen.
  • Vorlesesoftware kann Probleme mit Iconfonts bekommen.

SVG

Einige Leute meinen, dass Iconfonts ihre Zeit schon hinter sich haben. Man solle auf SVG setzen. SVG, das sind grafische Elemente, die als Quellcode beschrieben werden. Es sind also keine Bilder, die man separat abspeichern muss, sondern Codes innerhalb einer Seite, die der Browser interpretiert – so wie HTML und CSS auch.

Man kann die Grafiken einzeln handhaben, braucht also keinen Font. SVG ist bestens skalierbar und für hochauflösende Retina-Displays geeignet. Gegen SVG spricht derzeit nur, dass die Browser nicht immer mitkommen. Auch die Auswahl ist noch gering. Für Wordpress gibt es ein passendes Plugin, es heißt WP SVG Icons und enthält fast 500 Icons.

svg

Mit den Iconfonts lässt sich, wie wir gesehen haben, allerhand anstellen.

Kategorie: Wordpress | ** Blogarchiv

Mehr zum Thema

  • Darf ich Logo, Name oder Farben von WordPress verwenden?
  • Was du über WordPress Plugins wissen musst
  • Die wichtigsten WordPress Plugins 💨 in der Übersicht
  • Nach der WordPress Installation – Was du als Erstes tun solltest
  • Deinen ersten WordPress Beitrag erstellen
  • H1 Überschriften mit dem WordPress Editor attraktiv gestalten
  • Wie du kinderleicht eine mehrsprachige Seite in WordPress erstellst
  • Was du über WordPress Hosting wissen solltest
  • WordPress Admin Menü: Wo zum Teufel sind die Optionen der Plugins?
  • WordPress schneller machen – 6 Dinge, die du wissen solltest
  • Managed WordPress Hosting – bequem und performant
  • Guide: Schlauer schreiben mit WordPress – Und dabei schneller sein

Conterest ist als Projekt beeendet, bleibt aber online

Aus diesem Grund gibt es keine Kommentare mehr. Danke an alle für das Lesen! Ich habe mich in der Zwischenzeit als Schriftsteller Lenny Löwenstern neu erfunden. In der übrigen Zeit kümmere ich mich um schöne und alte Wörter.

 

Die Themen

  • Bloggen
  • Blogstart
  • Blogtraffic
  • Pinterest
  • Schreiben
  • Schrift & Grafik
  • Wordpress

Blogtipps

  • Archivieren oder löschen? Das Blog für die Ewigkeit
  • Media Kit für Blogger — Was gehört hinein?
  • Bloggen mit Wordpress 🎬 Dein Schnelleinstieg in 13 Schritten
  • Gratis Fonts ✔️ 80 fantastische Schriften
  • Warum dein Blog eine 404 Seite braucht – und wie du sie anlegst
  • 40 Dinge, die du sofort für dein Blog tun kannst ✺
  • DU, SIE, IHR? Wie spreche ich Blogleser am besten an?
  • Wordpress Themes 🍪 Worauf es wirklich ankommt
  • Mockups — So passt du vorgefertigte Designs schnell an 📲 Hier sind 30 Downloads
  • Welche Arten von Bild und Grafik gibt es für Blogpostings?

Favoriten der Redaktion

  • Gastbloggen Gratis Badges
  • Langzeitmotivation
  • Von Links profitieren
  • Wieso Bloggen?
  • Warum Blogger SEO brauchen
  • Was du mit 100€ fürs Blog tun kannst

Beliebt

  • Blog schreiben für Einsteiger
  • 23 Zitate von Bloggern
  • Tricks mit Text
  • Schnelleinstieg mit WordPress

Empfehlungen

  • Der perfekte Blog Post
  • Lexikon Bloggersprache
  • Beitragsbilder erstellen
  • Ideen finden

Auch interessant

  • Mein Blogger Kodex
  • Ist eine Sidebar nötig?
  • Alltag der Vollzeitblogger
  • Logo selbst machen

conterest.de · Das Blog für Blogger von Sven Lennartz · 2015 - 2018 · Datenschutz · Impressum