Add icon to submit button in twitter bootstrap 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.


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>

You can use a button tag instead of input

<button type="submit" class="btn btn-primary">
  <i class="icon-user icon-white"></i> Sign in
</button>

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.