Bootstrap refresh icon with text on Submit button

Question

I would like to have a "Refresh" button on my page. For that I decided to use the bootstrap refresh-icon style. The icon appears on my button but it does not leave much room for the text "Refresh". Here is the code and Fiddle...

<input class="icon-refresh" type="submit" value="Refresh" name="Test"> </input>

http://jsfiddle.net/jjaleel/kVHbV/339/

Anyone have any suggestions on how I can expand the button width so it shows both the refresh icon and the text?

Thanks.

Answer 1

You could use a button tag instead, they were made to be styled with much more control than an input.

Here's how I would use one with the latest bootstrap..

<button class="btn btn-primary"><span class="glyphicon glyphicon-refresh"></span> Refresh</button>