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!
Beliebte Ressourcen sind:
- HTML-Icons
- Fontawesome
Beide Optionen sind frei, bei Fontawesome ist eine Premium-Version mit mehr Icons verfügbar, die aber erst mal 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.
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.
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 erforderliche 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!