Es gibt eine Phase im Webdesign, da kommt man irgendwann an den Punkt, an dem einfach etwas Salz in der Suppe fehlt. Der letzte kleine Akzent, welcher der Webseite den letzten Schliff verpasst. An dieser Stelle kommen Icons ins Spiel, kleine Miniaturbildchen oder Piktogramme die sofort eine Nachricht übermitteln und auch noch gut aussehen!

NETANDWORX greift gerne auf Ressourcen zurück:

  • HTML-Icons
  • Fontawesome

Beide Optionen sind frei, bei Fontawesome ist eine Premium-Version mit mehr Icons verfügbar, die aber erstmal nicht unbedingt für Ihr Webproject notwendig ist.

HTML-Icons

Dies ist sicherlich die einfachste Methode. HTML-Icons werden vom direkt Browser interpretiert, es ist kein Plugin oder eine weitere CSS-Datei notwendig. Eine Liste von Symbolen finden Sie z.B. hier:
Icons and Symbols HTML Character Codes

Man findet dort allerlei, angefangen von den bekannten 3 Affen 🙈 🙉 🙊, weitere Tiere 😺 🐖 🐌 🐰, Alltagsgegenstände 🎧 🌲 🚖 🛀 und vieles mehr.

Webdesign-htmlicons

Einbinden auf Ihrer Webseite erfolgt über den HTML-Code, z.B. 🙋 für 🙋. Wechseln Sie dazu im Editor auf Text oder fügen Sie einfach den Character-Code als HTML ein.

 

Fontawesome

Fontawesome bietet derzeit eine Sammlung von 7020 Symbolen (in der Pro Version), davon 1535 zur freien Nutzung an.

Fontawesome

Die Einbindung ins Webdesign erfolgt je nach System auf unterschiedliche Art und Weise. Falls man ein CMS wie beispielsweise WordPress benutzt, ist es am einfachsten ein Plugin zu installieren. Das betreffende Plugin stellt Font Awesome bereit und trägt deren Namen. Nach der Aktivierung empfiehlt sich für maximale Browser-Kompatibilität als Methode „Webfont“ einzustellen. Danach können Sie mittels eines HTML-Codes ein beliebiges Symbol in Ihrer Webseite einbauen:

<i class="fab fa-wordpress"></i>

erzeugt das WordPressSymbol.

Fazit: Beide Methoden haben ihre Vor- und Nachteile: HTML-Icons benötigen keine weitere CSS-Datei. Der Overhead ist jedoch meist zu vernachlässigen. Falls man Font Awesome über externen Link einbindet, befindet sich auf Grund der hohen Verbreitung die erfroderliche Datei höchstwahrscheinlich bereits im Cache Ihres Browsers.

Im Endeffekt kann man nur sagen: Geschmack ist auch nur Geschmackssache! Welche Methode Sie auch wählen ist tatsächlich abhängig von Ihrer persönlichen Vorliebe!