Font Awesome

http://fontawesome.io/

http://fontawesome.io/cheatsheet/

 <link rel="stylesheet" href="fonts/fa/css/font-awesome.min.css" type="text/css">

nur css und fonts Ordner benötigt

<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

Use fa-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.

 <a class="list-group-item" href="#">  Home</a>
 <a class="list-group-item" href="#">  Library</a>
 <a class="list-group-item" href="#">  Applications</a>
 <a class="list-group-item" href="#">  Settings</a>

Bordered & Pulled Icons View LESS View SASS

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

Use fa-border and fa-pull-right or fa-pull-left for easy pull quotes or article icons.

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

Animated Icons View LESS View SASS

Loading example (with fa-spinner icon) Loading (with fa-circle-o-notch icon) Loading example (with fa-refresh icon) Loading example (with fa-cog icon) Loading example (with fa-spinner icon)

Use the fa-spin class to get any icon to rotate, and use fa-pulse to have it rotate with 8 steps. Works well with fa-spinner, fa-refresh, and fa-cog.

Loading...

Loading...

Loading...

Loading...

Loading...

Note: Some browsers on some platforms have issues with animated icons resulting in a jittery wobbling effect. See issue #671 for examples and possible workarounds.

Note: CSS3 animations aren't supported in IE8 - IE9. Rotated & Flipped View LESS View SASS

 normal
 fa-rotate-90
 fa-rotate-180
 fa-rotate-270
 fa-flip-horizontal
 fa-flip-vertical

To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes.

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

Stacked Icons View LESS View SASS fa-twitter on fa-square-o fa-flag on fa-circle fa-terminal on fa-square fa-ban on fa-camera

To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.

fa-twitter on fa-square-o

fa-flag on fa-circle

fa-terminal on fa-square

fa-ban on fa-camera

Bootstrap 3 Examples

   Edit
   Delete
   Ban
   Make admin

Font Awesome works great with the full range of Bootstrap components.

<a class="btn btn-danger" href="#">

  Delete</a>

<a class="btn btn-default btn-sm" href="#">

  Settings</a>

<a class="btn btn-lg btn-success" href="#">

  Font Awesome
Version 4.7.0</a>

 <a class="btn btn-default" href="#">
   
 </a>
 <a class="btn btn-default" href="#">
   
 </a>
 <a class="btn btn-default" href="#">
   
 </a>
 <a class="btn btn-default" href="#">
   
 </a>

 
 <input class="form-control" type="text" placeholder="Email address">

 
 <input class="form-control" type="password" placeholder="Password">

 <a class="btn btn-primary" href="#"> User</a>
 <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
   
 </a>

• <a href="#"> Edit</a>
• <a href="#"> Delete</a>
• <a href="#"> Ban</a>
• <a href="#"> Make admin</a>

Custom CSS

Anything you can do with CSS font styles, you can do with Font Awesome.

Star Ratings (inspired by CSS Tricks)