Font Awesome
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>
Custom CSS
Anything you can do with CSS font styles, you can do with Font Awesome.
Star Ratings (inspired by CSS Tricks)
