Quelle: Unsplash

Erste Schritte mit der Bealeaf Icon Fonts API

Icon Fonts können die Usability auf einer Webseite erheblich vereinfachen. Sie unterstreichen die Bedeutung eines Elements und können auch alleine einfach verwendet werden. Doch wie bringe ich die Icon Fonts auf meine Webseite?

In diesem kleinen Tutorial zeige ich dir, wie du ganz einfach und in nur wenigen Schritten hochwertige Icon Fonts von namhaften Herstellern in deine Webseite einbinden kannst. Wir nutzen hierfür die Bealeaf Icon Fonts API und den Icon Font Themify.

Stylesheet Link in die Webseite einbinden:

Kopiere einfach den unteren Stylesheet Link und füge diesen innerhalb des <head> Elements deiner Webseite ein:

<link href="https://fonts.bealeafapis.com/icon?family=Themify" rel="stylesheet">

Das war es eigentlich schon. Du musst nun nur noch ein entsprechendes Icon auf der offiziellen Themify Icon Font Webseite auswählen und den Code in deinem HTML Code im <body> Bereich platzieren.

Hier der Syntax für das Home Icon von Themify:

<span class="ti-home"></span>

Tausche einfach den Code im class="" Bereich des <span></span> Tags aus und ersetze ihn mit einem verfügbaren Icon deiner Wahl.

Mehrere Icon Fonts in einem Stylesheet Link

Die Bealeaf Icon Fonts API ermöglicht es dir mehrere Icon Fonts gleichzeitig einzubinden. Trenne dafür die Namen der Icon Font Familien einfach mit einem Vertical Bar Character "|".

Beispiel mit dem Themify und dem Font Awesome Icon Font:

<link href="https://fonts.bealeafapis.com/icon?family=Themify|Font+Awesome" rel="stylesheet">

Hat dir dieser Artikel gefallen oder hast du Fragen? Lass es mich wissen mit einer Nachricht in den Kommentaren. :)

This article was updated on Dezember 7, 2017

Comments