Add icon to submit button in twitter bootstrap 2
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 styled hyperlinks.
The closest I've come is getting the icon displayed next to the button, but not inside.
<div class="input-prepend">
<span class="add-on"><i class="icon-user icon-white"></i></span>
<input type="submit" class="btn-primary" value="Login" >
</div>
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>
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.