Online Profiler

  • PROFIL
  • LEISTUNGEN
  • PREISE
  • PORTFOLIO
  • FACHWISSEN
  • KONTAKT
Sonderzeichen und Icon Fonts
Content Marketing ✷ Sonderzeichen und Icon Fonts

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

Sie benötigen eine Homepage?

Ich habe mich auf die Erstellung von WordPress Webseiten spezialisiert.

Angebote im Überblick

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 >

 

Sie haben Fragen zur Contentpflege?


    Spamschutz: Bitte ausfüllen *
    captcha

    * sind Pflichtfelder

    Der Artikel gibt bereits einen Einblick in die Welt der Sonderzeichen und stellt die Darstellung von Zeichen via Icon Fonts vor.

    Es sind aber vielleicht immer noch Fragen offen geblieben?

    Ich unterstütze Sie gerne!

    Tragen Sie links Ihren Namen, E-Mail Adresse oder Telefon Nr. ein und ich melde mich umgehend bei Ihnen.

     

    Link Juice:

    Kategorie: Content Marketing, Design Pattern, Fachwissen

    Silke Hohgardt ✷ Digitale Medien Profil Schleiferin

    Silke Hohgardt • Online Profiler
    Gründerin von Online Profiler ✷ Werkstatt für WordPress Webseiten ✷
    Digital Media Studio ✷ COWORKER . SPACE ✷ begeistert von Responsive Web Design, Typographie, Fotografie und Storytelling ✷ arbeite mit WordPress, Genesis Framework, Bootstrap ✷ liebe Ragdolls, Tai Chi, italienische & asiatische Küche und essen bei wagamama
    ✷ Twitter @onlineprofiler ✷ mehr über mich im → Profil

    GEBEN SIE IHREM DIAMANTEN SCHLIFF!

    Mit einer neuen Webseite von Online Profiler.
    So funktioniert es

    FACHWISSEN & THEMEN

    → Web Design
    → Design Pattern
    → Web Development
    → WordPress
    → Genesis
    → Online Marketing
    → SEO
    → Content Marketing
    → Internetrecht
    Webdesign : Professionelle Homepage erstellen
    Neu: Webdesign Simmern und VHS Kurse
     
    Responsive Web Design :
    Mobile Optimierung für Websites

     
    Suchmaschinen Optimierung :
    OnPage SEO Grundlagen
    Off Page SEO Grundlagen
    Online Profiler
    Internet & Webdesign Agentur
    Ihre Werkstatt für WordPress Webseiten

    Ernst-Siegel-Str. 14
    55469 Simmern / Hunsrück
    Deutschland

    +49 6761 8305 189
    Kontakt

    Wordpress Logo
    genesis framework logo
    StudioPress

     
     

    • Bloglovin
    • Facebook
    • Google+
    • Instagram
    • LinkedIn
    • RSS
    • Twitter
    • IMPRESSUM
    • DATENSCHUTZ