Font Awesome - Icon Library & Toolkit

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>