Font Awesome 5 Tutorial für Anfänger

Font Awesome 5 Tutorial für Anfänger. Die besten gratis Icons für deine Website. Die Font Awesome Library hat derzeit über 1600 kostenlose Icons die du für dein nächstes Projekt nutzen kannst. In diesem Tutorial erfährst du wie du dir diese Library am besten einbindest, nutzt und wie du aus den frei verfügbaren Icons vollkommen neue erstellen kannst.

⏩ Videoinhalt
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
00:00 Einleitung
00:44 Kit anlegen und einstellen
03:53 Übersicht aller Icons
04:40 Kit benutzen
05:28 Icons verwenden
07:43 Icons stylen
10:10 Icons mit Listen
12:50 Icons animieren
14:22 Icons ausrichten
15:45 Neue Icons erstellen
20:41 Icons mit Texten
25:24 Wie gehts weiter?

⭐ Das könnte dich auch interessieren
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Einfach mal HTML lernen:

Einfach mal CSS lernen:

Font Awesome Library

📌 Über diesen Kanal und mich
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Webentwicklung effizient und einfach. Alles rundum Webentwicklung, Webdesign und angrenzende Themen. Mein Name ist Mario und ich bin bereits seit über 15 Jahren als Webentwickler tätig. Einige Tutorials auf diesem Kanal sind für absolute Anfänger ohne Vorkenntnisse geeignet, und andere für erfahrene Entwickler.

Starte Jetzt!

#fontawesome #icons #ProgrammierenM

[ralph.]

Das ist ein super Video. Kannte ich noch nicht. Wie immer gut erklärt.
Ralph

[danawitzig]

Ich habe schon einige Videos von dir angeschaut und viel dadurch gelernt. Du erklärst alles immer leicht verständlich und kommst sehr sympathisch rüber! Und dann dein Dialekt..., ich hör dir gerne zu! ❤😊

Tausend Dank! Ich werde mir nach und nach Deine Videos ansehen und nacharbeiten! Du erklärst hervorragend!!!

[EugenBeirit]

hey, es gibt für visual studio code eine erweiterung die font awesome galerie heißt. lohnt es die erweiterung zu installieren und benutzen oder doch nicht?

[benjaminschmidt]

Iteressant, meine Frage hierzu... Was ist denn deine Empfehlung? (Gnerell)
1. Daten runter laden und einbinden, damit die seite auch lokal funktional ist
2. Einbindung der webseite... damit nur online verfügbar.

[tugrularslan]

Hallo Mario,

erstmal vielen Dank für dein Input.

Gibt es denn per CSS die Möglichkeit ein Icon in zwei verschiedene Farben zu stylen.
Als Beispiel das Xing-Icon besteht aus zwei Figuren und möchte diese in unterschiedlich färben. Vielen Dank, frohes Neus und bleib gesund.

VG

[berlin]

wie kann ich einzelne Icons von Font Awesome Icons in Open Office einbinden? Nicht über Einfuegen // Sonderzeichen // ... sondern per Copy & Paste ein einzelnes Icon?

[K_Andreas]

Toll 👏!!! Frage: Wenn ich, so wie im Video gezeigt, das Kit einbinde, muss ich das auf der Website irgendwo erwähnen? (wegen Urheberrechten oder externer Verlinkung?) 🧐

[wolfenrico]

Das hat bei mir nicht funktioniert. Warum?
<!--Icons in Verbindung mit Text-->

<span class="fa-layers fa-fw fa-5x">
<i class="fas fa-certificate"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-12 rotate--30">NEU</span>
</span>

[chiroaksun]

<i class="fab fa-twitter fa-3x fa-rotate-45"></i>
Bei mir funktioniert es mit dem rotate nicht. da ist ein Fragezeichen. Hab ich was falsch angegeben?

[erickbecker]

ahh Mario hilfeee mir werden diese icons irgendwie nicht im browser angezeigt weißt du warum ? ich verzweifle langsam ich tipp das wirklich genauso ein wie du xD