Right align font-awesome spinner

Question

How to right align the font-awesome spinner, so it will be on the right hand side of a button

Here is not working code:

  <div class="form-group row"> <div class="offset-sm-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign up</button> <div><i class="fa-li fa fa-spinner fa-spin"></i></div> </div> </div> 

While the code above works, the spinner is always on the left hand side of the button, try so many different ways to achieve that

Answer 1

the class fa-li is what was causing the the problem, it makes the icon have a position:absolute and it position it on the left

So you need to remove the class.

and if you want it to be displayed inside the button than move i tag inside button tag

see code snippet :

 <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="form-group"> <div class="offset-sm-2 col-sm-10"> <button type="submit" class="btn btn-default"> Sign up <i class="fa fa-spinner fa-spin"></i> </button> </div> </div> 

Or just put it outside and it will be next to the button

See code snippet:

 <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="form-group"> <div class="offset-sm-2 col-sm-10"> <button type="submit" class="btn btn-default"> Sign up </button> <i class="fa fa-spinner fa-spin"></i> </div> </div>