Mehr HTML & CSS (Deutsch)

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.

Icons

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:

Love Icons

Andere Icon-Bibliotheken