Font Awesome Animated Icons

Farooq Ahmad Leave a Reply Tags:
Font Awesome Animated Icons

Font Awesome Animated Icons

Recommendation: To use the Font Awesome icons, add the following line inside the <head>  </head> section of your HTML page:
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

Read Also: Font Awesome for File Type Icons

Animated Icons

 Loading example (with fa-spinner icon) Loading (with fa-circle-o-notch icon) Loading example (with fa-refresh icon) 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-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.
<i class="fa fa-spinner fa-spin fa-3x fa-fw margin-bottom"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw margin-bottom"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-refresh fa-spin fa-3x fa-fw margin-bottom"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-cog fa-spin fa-3x fa-fw margin-bottom"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom"></i>
<span class="sr-only">Loading...</span>
Previous
Next
You Might Also Like

Speak Your Mind