Add icon to submit button in twitter bootstrap 2

Question

I want to use the twitter bootstrap icons on my form input submit buttons.

The examples on http://twitter.github.com/bootstrap/base-css.html#icons mainly show style

Answer 1

I got this to work, but there's a few caveats I haven't resolved yet.

Anyway, this is how it's done:

Take your average input button:

<input type="submit" class="btn btn-success" value="Save">

Cut out the icon you want for your submit buttons from the glyphicons sprite file, make sure it's a 14x14 px image. Yes, in ideal circumstances you could reuse the sprite, and if anyone figures that out I'll be happy to hear how it's done. :-)

Once you did that, you can write css for your input button like this:

input[type='submit'] {
    background-image: url('../images/submit-icon.png'), #62C462; /* fallback color if gradients are not supported */
    background-image: url('../images/submit-icon.png'), -webkit-linear-gradient(top, #62C462, #51A351);
    background-image: url('../images/submit-icon.png'),    -moz-linear-gradient(top, #62C462, #51A351); /* For Fx 3.6 to Fx 15 */
    background-image: url('../images/submit-icon.png'),     -ms-linear-gradient(top, #62C462, #51A351); /* For IE 10 Platform Previews and Consumer Preview */
    background-image: url('../images/submit-icon.png'),      -o-linear-gradient(top, #62C462, #51A351); /* For Opera 11.1 to 12.0 */
    background-image: url('../images/submit-icon.png'),         linear-gradient(top, #62C462, #51A351); /* Standard syntax; must be the last statement */
    background-repeat: no-repeat;
    background-position: 5px 50%, 0cm 0cm;
    padding-left: 25px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

input[type='submit']:hover {
    background-image: url('../images/submit-icon.png'), #51A351; /* fallback color if gradients are not supported */
    background-image: url('../images/submit-icon.png'), -webkit-linear-gradient(top, #51A351, #51A351);
    background-image: url('../images/submit-icon.png'),    -moz-linear-gradient(top, #51A351, #51A351); /* For Fx 3.6 to Fx 15 */
    background-image: url('../images/submit-icon.png'),     -ms-linear-gradient(top, #51A351, #51A351); /* For IE 10 Platform Previews and Consumer Preview */
    background-image: url('../images/submit-icon.png'),      -o-linear-gradient(top, #51A351, #51A351); /* For Opera 11.1 to 12.0 */
    background-image: url('../images/submit-icon.png'),         linear-gradient(top, #51A351, #51A351); /* Standard syntax; must be the last statement */
    background-position: 5px 50%, 0cm 0cm;
    padding-left: 25px;
}

Works in Firefox 14, Chrome 21

Doesn't work in IE 9

tl;dr: With a bit of css you can automagically put icons on your submit buttons, but you need to put the icon in a separate file and it won't work in Internet Explorer.

Answer 2

I think you can use label tags for this purpose. Here is a sample of the twitter bootstrap HTML navbar:

<form class="navbar-search">
    <input type="text" class="search-query" placeholder="Search here" />        
    <label for="mySubmit" class="btn"><i class="icon-search icon-white"></i> Search me</label>
    <input id="mySubmit" type="submit" value="Go" class="hidden" />
</form>

Basically you get a label element for the input (type=submit) and then you hide the actual input submit. Users can click on the label element and still get through with the form submission.

Answer 3

You can add an <a/> with the icon somewhere, and bind a JavaScrit action to it, that submits the form. If necessary, the name and value of the original submit button's name+value can be there in a hidden attribute. It's easy with jQuery, please allow me to avoid the pure JavaScript version.

Suppose that this is the original form:

<form method="post" id="myFavoriteForm>
   ...other fields...
   <input class="btn btn-primary" type="submit" name="login" value="Let me in" />
</form>

Change it like this:

<form method="post" id="myFavoriteForm">
   ...other fields...
   <a href="#" class="btn btn-primary" id="myFavoriteFormSubmitButton">
      <i class="icon-user icon-white"></i>&nbsp;Let me in
   </a>
</form>

...and then the magical jQuery:

$("#myFavoriteFormSubmitButton").bind('click', function(event) {
   $("#myFavoriteForm").submit();
});

Or if you want to make sure that the user can always submit the form --that's what I would do in your shoes--, you can leave the normal submit button in the form, and hide it with jQuery .hide(). It ensures that login still works without JavaScript and jQuery according to the normal submit button (there are people using links, w3m and similar browsers), but provides a fancy button with icon if possible.

Answer 4

I think its a solution for your problem

<input type="text" placeholder="search here" />
<button type="submit"><i class="glyphicon glyphicon-search"></button>

Answer 5

I think you should try this FontAwesome designed to be use with Twitter Bootstrap.

<button class="btn btn-primary icon-save">Button With Icon</button>

Answer 6

i guess this better way, works fine for me.

<form name="myform">
<!-- form fields -->
   <a href="#" class="btn btn-success" onclick="document.myform.submit();">
     Submit <i class="icon-plus"></i>&nbsp; Icon
   </a>
</form>