HTML: Icons einfügen: So gehts!

Wenn du in HTML eigene Icons einfügen möchtest, dann verwendest du dafür am besten Font Awesome. Dazu musst du zuerst eine CSS Datei in den Head Bereich deiner Webseite einfügen und kannst dann Icons mit HTML Codes einfügen. Wie das geht zeige ich dir in diesem Beitrag.

HTML Icons einfügen

Zuerst fügst du die Font Awesome CSS Datei in den Head Bereich deiner Webseite ein.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Hier findest du alle Icons die es gibt

In deinem HTML Dokument sieht das jetzt so aus. Darunter befinden sich dann die HTML Codes der Icons.

<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>

Nachdem du Die CSS Datei eingefügt hast kannst du jedes Icon mit seinem eigenen HTML Code einfügen.

Dies ist zum Beispiel das Zeichen für ein Herz. Weiter Zeichen findest du auf der Seite von Font Awesome.

<i class="fa fa-cloud"></i>

Ergebnis

So sieht das Ergebnis unseres oberen HTML Beispiels aus.

Jetzt HTML lernen

Fazit

Wenn du Icons in deine HTML Webseite einfügen möchtest, dann ist eine externe CSS Library notwendig. Font Awesome eignet sich hierfür am besten und hat am meisten Auswahl. Einmal eingebunden kannst du dann die html Codes für unzählige verschiedene Icons einfügen. Hier sind dir dann keine Grenzen mehr gesetzt.

Weitere Beiträge zu HTML

HTML: Text in Zwischenablage kopieren – So gehts
HTML: Grundgerüst – Webseite erstellen
HTML: Textarea erstellen – So gehts
PHP in HTML einfügen – So gehts!
HTML: Rahmen um Text – So gehts

HTML Datei öffnen – Kostenloser Editor 2021
HTML: Anker erstellen – So wirds gemacht!
HTML: 302 Redirect – So einfach gehts!
HTML: URL Parameter Erklärung
HTML: Bild einfügen – So gehts!

Jquery in HTML einbinden : So wirds gemacht!
HTML: Zurück Button & Link erstellen: So gehts!
HTML: Versteckter und Unsichtbarer Text : So gehs
HTML: Großbuchstaben schreiben: So gehts!
HTML: Icons einfügen: So gehts!

HTML: iFrame in Webseite einbinden – So gehts!
HTML: Liste erstellen – So gehts!
HTML: Erzwungenes Leerzeichen einfügen – So gehts!
CSS in HTML einbinden – So gehts!
HTML: Leerzeichen erstellen – So einfach gehts!

HTML: Auskommentieren – So gehts!
HTML: Bild zentrieren und mittig ausrichten
HTML: Fett schreiben – So einfach gehts!
HTML Text ausrichten: rechtsbündig & linksbündig
HTML: Zeilenabstand einstellen – So gehts!

HTML: Trennlinie einfügen – So gehts!
HTML: Absatz einfügen – So gehts!
HTML: Horizontale Linie – So gehts
HTML: Tabellen erstellen – So gehts!
HTML: Datum & Uhrzeit anzeigen – So gehts!

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite

Das könnte dich interessieren!

Weitere Kategorien