Icons auf Website verwenden
Icons in eine Webseite einzufügen ist nicht schwer. Aber wenn man Texte und Icons kombiniert (z.B. für einen Button) oder wenn die Icons in der Grösse veränderbar sein sollen, dann wird es schwierig.
Die Lösung für dieses Problem sind Icon Fonts und SVG Icons. Icon Fonts und SVG Icons können in der Grösse und Farbe angepasst werden.
Im Folgenden schauen wir ein paar Optionen an.
Ionicons (SVG)
Ionicons sind sehr einfach in der Website zu integrieren.
Gehen Sie zur Ionicons Usage Seite und kopieren Sie das Script Tag. Platzieren sie das <script> Tag am Schluss Ihrer Website, gerade vor dem schliessenden </body> Tag.
Hier ist ein Beispiel. Sie sollten jedoch die neuste Version von der Website oben kopieren:
<script src="https://unpkg.com/ionicons@4.4.2/dist/ionicons.js"></script>
Um ein Icon zu verwenden, wählen Sie eines aus der Ionicons Icon Übersicht aus. Wenn Sie darauf klicken, wird der Code angezeigt, welcher eingefügt werden muss. Hier ist ein Beispiel mit Icon und Text:
<ion-icon name="heart"></ion-icon> I love icons
So sollte das Resultat aussehen:
Andere Icon-Bibliotheken
- Font Awesome - eine sehr beliebte Icon Font.
- Und viele mehr…
Diese Seite ist abgeleitet von code.makery von Marco Jakob, verwendet unter CC BY.
Sie ist lizenziert unter CC BY-NC-SA von Daniel Fahrni daniel.fahrni@bzz.ch.