Font Awesome version 4 - Button with spin icon

Question

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>

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?

Answer 1

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>

Answer 2

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