CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
AbuMariam
AbuMariam

Reputation: 3668

Bootstrap refresh icon with text on Submit button

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.

Upvotes: 3

Views: 57438

Answers (3)

Faust
Faust

Reputation: 15394

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;
}

Upvotes: 2

Maxime Lorant
Maxime Lorant

Reputation: 36141

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

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

JSFiddle

Upvotes: 2

Dale
Dale

Reputation: 10469

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>

Upvotes: 12

Related Questions