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>

Answer 2

Use a <button> , with the submit action, instead:

<button type="submit"><i class="icon-refresh"></i> Test</button>

JSFiddle

Answer 3

Put the refresh icon in a span inside a button:

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

update (based on OP comment)

Without being able to change the markup at all, this is tough. To get rid of the "Refresh" text, set the text-color to transparent . For sizing, set display to inline-block and fix height and width to 20px.

input{
    display:inline-block;
    color:transparent;
    height:20px !important;
    width:20px !important;
}