Sonderzeichen und Icon Fonts

Sonderzeichen helfen uns bei der Contentpflege. Besonders Redakteure oder Personen, die Ihre Webseiten Inhalte regelmäßig anpassen, können mit Hilfe von Sonderzeichen viele graphische Darstellungen nachbilden. Sei es ein Herzsymbol, einen Stern oder einen Pfeil. Die Welt der Sonderzeichen ist fast unendlich. Neben HTML Zeichensätze lernen Sie in diesem Artikel auch die sogenannten Icon-Fonts kennen und ich stellen Ihnen meine Lieblings-Fonts (Font Awesome, Dashicons und Glyhicons Halfings) vor.

Kleine Hilfe zur Contentpflege mit Sonderzeichen und Icon Fonts

HTML Zeichensätze

Ich werde immer wieder gefragt, wie man z.B. einen Pfeil → als HTML Zeichensatz darstellt.

Das Thema Sonderzeichen ist für einen Content-Redakteur wirklich eine spannende Sache, da viele Symbole sehr leicht über kleine Code Snippets darstellbar sind.

Deshalb hier eine kurze Erläuterung dazu:
Ein html Zeichensatz fängt immer mit einem & an und hören mit einem ; auf.

Nützliche Sonderzeichen:
♥ Herzsymbol: ♥
• Bulletpoint: •
  Leerschritt, der nicht zum Zeilenumbruch führt (non breaking space):  
→ Pfeilsymbol: →

Und natürlich findet man auch jede Menge Infos hierzu auf Wikipedia.
Infos auf Wikipedia

Und noch ein Link zu einer sehr guten Übersichtsseite:
Tutorial Sonderzeichen

Icon Fonts

Neben diesen Sonderzeichen haben sich weitere Möglichkeiten zur Darstellung von Sonderzeichen eröffnet, die sogenannten Icon-Fonts.
Im folgende werde ich Ihnen meine drei Lieblings Fonts vorstellen:

1. Font Awesome
2. WordPress Dashicon
3. Bootstraps Glyhicons Halfings

1. Font Awesome

Font Awesome ist eine Icon Font, die ich hier ganz besonders hervorheben möchte. Ich nutze diese fast immer, da ich sie – wie die Sonderzeichen – leicht über einen html code den den Online-Auftritt integrieren kann. Allerdings muss dazu der entsprechende Online-Auftritt auch für die Umsetzung der Icon-Fonts vorbereitet sein.

Beispiel für die Nutzung der Font-Awesome:

Herzsymbol
< i class="fa fa-heart" >
Und zur Darstellung der Icon Font in unterschiedlichen Größen kann man folgenden Code verwenden:

< i class="fa fa-heart fa-lg" >
< i class="fa fa-heart fa-2x" >
< i class="fa fa-heart fa-3x" >
< i class="fa fa-heart fa-4x" >
< i class="fa fa-heart fa-5x" >

Weitere Informationen zur Icon Font Awesome finden Sie hier:
Informationen über Font Awesome
 

2. WordPress Dashicons

Doch da wir uns im Universum von WordPress befinden, möchte ich an dieser Stelle unbedingt auf die Dashicons aufmerksam machen, da diese Icon Font bereits ins Content Management System (CMS) integrierte ist und somit sofort genutzt werden kann.
Die wenigsten kenne diese jedoch oder wissen, wie man sie integriert. Deshalb im folgenden eine kleine Einführung hierzu.
Dashicons wurden von Mel Choyce designed und sind seit der Version 3.8 fester Bestandteil von WordPress.
Dashicons on Github

Eingebunden wird diese Icon Font wie folgt (3 Wege):

1. Integration in CSS: content: “\f120”;
2. Integration in HTML: < span class="dashicons dashicons-wordpress" >< /span >
3. Kopieren und in Photoshop Textfield einfügen: (kann hier nicht dargestellt werden)

Diese drei Möglichkeiten sowie alle bestehenden Icons können hier nachgeschlagen werden:
https://developer.wordpress.org/resource/dashicons/#wordpress
 

3. Bootstrap Glyhicons Halfings

Und dann gibt es noch eine dritte Icon-Font, die ich hier vorstellen möchte. Da ich großer Fan von Bootstrap bin und wenn möglich Elemente des Frameworks mit in meine Arbeit integriere, möchte ich an dieser Stelle noch auf die Icon-Fonts Glyhicons Halfings aufmerksam machen, da diese in Bootstrap integriert und somit auch recht unkompliziert einsetzbar ist.
Bootstrap Glyhicons Halfings

Die Icon-Font ist ein Component von Bootstrap und kann ähnlich der Dashicons leicht via CSS oder HTML integriert werden.

Natürlich ist es immer auch möglich sogenannte Shortcodes für das jeweilige Codeschnipsel (dies gilt für alle oben erwähnten Optionen) zu bauen, damit diese nicht nur über den HTML Editor genutzt werden können.

Eingebunden wird diese Icon Font wie folgt (2 Wege):

1. Integration in CSS: content: “\e003”;
2. Integration in HTML: < span class="glyphicon glyphicon-search" >< /span >

Link Juice: