Add icon to submit button in twitter bootstrap 2

twitter-bootstrap twitter-bootstrap-2
AyKarsi picture AyKarsi · Feb 21, 2012 · Viewed 374.8k times · Source

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>

Answer

Simon Cunningham picture Simon Cunningham · Feb 22, 2012

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>

Related questions

How can I get my Twitter Bootstrap buttons to right align?

I have a simple demo here: http://jsfiddle.net/HdeZ3/1/ <ul> <li>One <input class="btn pull-right" value="test"></li> <li>Two <input class="btn pull-right" value="test2">&…

Read More
How to center a div with Bootstrap2?

http://twitter.github.com/bootstrap/scaffolding.html I tried like all combinations: <div class="row"> <div class="span7 offset5"> box </div> </div> or <div class="container"> <div class="row"&…

Read More
TypeError: $(...).modal is not a function with bootstrap Modal

I have a bootstrap 2.32 modal which I am trying to dynamically insert into the HTML of another view. I'm working with Codeigniter 2.1. Following Dynamically inserting a bootstrap modal partial view into a view, I have: <div id="modal_target"&…

Read More