User Rating: 0 / 5

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.

Wichtigsten Optionen:

Verschieden Größen

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

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

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

fa-twitter auf fa-square-o

<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>


fa-flag auf fa-circle

<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>

fa-ban auf fa-camera

<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>

verwandte Artikel:

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 nutzte diese selbst um später später dort ansetzten wo ich aufgehört habe, oder wo mich mein Gedächniss 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 mehr zu Motivieren in der Freizeit sich mit tollen hobbies zu beschäftigen und dadurch sein 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.

Neue Artikel

Joomla
Im Normalfall funktioniert die Installation von Komponenten, Modulen und Plugins problemlos, jedoch kann es immer mal zu unerwartetem kommen. Solltet ihr die Fehlermaldung JFolder::create: Der Pfad...
Joomla
Mittlerweile gibt es keine Seite mehr, die nicht responsive ist, sprich sich an das Display des Endgerätes anpasst um ein optimales Benutzererlebnis zu gewährleisten, nur leider verwenden noch viele...
JGAURORA A5 - 3D Drucker
03 Jul Hardware
Nach langem hin und her habe ich mich nun dazu errungen einen Budget 3D Drucker mit Potential zu erstehen und es handelt sich hierbei um den JGAurora A5 3D Drucker. Die Punkte, die mir ins Auge...