Font Awesome version 4 - Button with spin icon

4
votes

I found this great JSFiddle using Bootstrap and Font Awesome to show a spinner inside a button: JSFiddle snippet 

<button class="btn btn-success has-spinner">
    <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
    Foo
</button>

Spin icon in button

This was using Font Awesome version 3.0.2. I'm using version 4.2.0, but is it right that this has been removed from the new version? I cannot find the icon-spin CSS class. How can I do this in the new version?

2
twitter-bootstrapfont-awesome

2 Answers

8
votes

Some things changed between 3.x and 4.x. Have a look at this snippet: 

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<button>
  <i class="fa fa-refresh fa-spin"></i> Foo
</button>
1
votes

Most (maybe all) icon names and actions are changes between v3.2.0 and v4.2.0.

the spinner for example is called "fa-spin"

Check it out on their website: http://fortawesome.github.io/Font-Awesome/icons/#spinner