FontAwesome ist nicht nur eine tolle Piktogrammsammlung, sondern es bietet auch tolle Funktionen, dann man kann die kleinen Bilder einfärben, animieren und kombinieren, wie das genau geht, habe ich hier in diesem Artikel zusammengefasst.

Dies funktioniert mit Fontawesome 5:

Verschieden Größen

fa-xs fa-s fa-sm fa-lg fa-2x fa-3x fa-4x fa-5x

<i class="fa fa-camera-retro fa-xs"></i> fa-xs
<i class="fa fa-camera-retro fa-xs"></i> fa-s
<i class="fa fa-camera-retro fa-xs"></i> fa-sm
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

Link mit Icon

<div><i class="fa fa-home fa-fw"></i>&nbsp; <a href>Home</a></div>
<div><i class="fa fa-book fa-fw"></i>&nbsp; <a href>Books</a></div>
<div><i class="fa fa-tag fa-fw"></i>&nbsp; <a href>Tags</a></div>
<div><i class="fa fa-sign-out fa-fw"></i>&nbsp; <a href>Logout</a></div>

Liste mit Icons

  • List icons
  • can be used
  • as bullets
  • in lists
<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

Zitat

...tomorrow we will run faster, stretch out our arms farther... And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.

<i class="fa fa-quote-left fa-3x fa-pull-left"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning&mdash; So we beat on, boats against the
current, borne back ceaselessly into the past.

Animationen

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>

Drehen und Spiegeln

<i class="fa fa-fw fa-shield"></i>
<i class="fa fa-shield fa-fw fa-rotate-90"></i> <i class="fa fa-shield fa-fw fa-rotate-180"></i> <i class="fa fa-shield fa-fw fa-rotate-270"></i> <i class="fa fa-shield fa-fw fa-flip-horizontal"></i> <i class="fa fa-shield fa-fw fa-flip-vertical"></i>

Kombinieren von Icons

Twitterlogo im Qadrat

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i> </span>


Flagge im Kreis

<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

fa-terminal auf fa-square

<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>

Verbotsschild auf Kamera

<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x" style="color:Tomato"></i>
</span>

Stern mit Plus in der rechten oberen Ecke

<span class="fa-stack" style="font-size: 0.7em; text-align: right; vertical-align: bottom;">
<i style="color: #fffb49; text-shadow: 1px 1px 2px black;" class="fas fa-star  fa-stack-1 "></i>
<i style="vertical-align: top;" class="fas fa-plus fa-xs  text-success "></i>
</span>

verwandte Artikel:

Update

05.01.2022 Update auf FontAwesome 5 & eigene Stackings

https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use

Ist diese Seite hilfreich?
Dann finde HIER heraus, wie du dieses Projekt unterstützen kannst!
Durch deine Unterstützung kann dieses Projekt erhalten und weiter ausgebaut werden.

Author:

Stefan J. Trucker

Stefan J. Trucker

Seit klein auf beschäftige ich mich mit Technik, Foto- & Videographie und Design. Um mein Wissen und meine Erfahrungen festzuhalten dokumentiere ich diese hier auf dieser Seite. Ich bemühe mich die Seite übersichtlich zu gestalten, damit es einfach ist meine Errungenschaften zu teilen. Ich nutze diese selbst um später dort anzusetzen wo ich aufgehört habe, oder wo mich mein Gedächtnis im Stich gelassen hat. So kann jeder von überall auf meine Inhalte zugreifen und schnellstmöglich zum gewünschten Ziel gelangen. Ich bin seit fast 10 Jahren als Ausbilder tätig und habe eine Leidenschaft entwickelt Wissen leicht und übersichtlich aufzubereiten. So hoffe ich mehrere zu motivieren sich in der Freizeit mit tollen Hobbies zu beschäftigen und dadurch das Leben ein Stückchen lebenswerter und interessanter zu gestalten. Ich lebe nach dem Motto: Imagine it, Design it, Create it - Just do what you like.

Überarbeitete Artikel

So, Jun 19, 2022 Projekte
Von klein auf faszinierten mich funkferngesteuerte Autos und ich wollte diese immer kleiner und sie sollten immer schneller fahren. So fand ich im Jahr 2000 einen Carpetracer auf der Modellbaumesse,...
Sa, Jun 18, 2022 Projekte
Als ich immer mehr mit meiner Kamer gefilmt habe, war ich auf der Suche nach einer leichten und kompakten Lösung um die Kamera von oben halten zu können. Da es zu dieser Zeit noch keinen Griff gab,...
Do, Jun 16, 2022 Projekte
Ein Kollege bat mich ein Gehäuse für seinen CO 2 Sensor zu Designen, welches leicht und schnell mit einem 3D Drucker herstellbar ist, da er eine kleine Massenproduktion damit plant.
Wir benutzen Cookies
Die Seite Trucker's Projetcs nutzt Cookies. Alle dieser Cookies sind essenziell für den Betrieb der Seite.
Die geladene Werbung von Google Adsense, so wie YouTube Videos dürfen keine personenbezogene Daten von den Seitenbesuchern generieren und auswerten. Produkte von Amazon werden mit einem direktlink zu einem Bild verlinkt.