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

Solution 1

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>

Solution 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.

Solution 3

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>

Solution 4

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.

Solution 5

There is a new way to do this with bootstrap 3:

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

It's on the bootstrap glyphicons page under "how to use":

View more solutions

Comments

[John Goodman]

I tried to do this for a while with no success. Basically, you cannot add html elements within a button's value.

[cartbeforehorse]

@JohnGoodman That should be an answer, not a comment. The accepted answer is a work-around, and not a direct reply to the question.

[Matenia Rossides]

This works, however please see w3schools.com/tags/tag_button.asp for more information on what the button tag is meant for and its cross browser effect. Use this with caution, especially with forms.

[Alban]

I have tested this in Chrome, Firefox, Safari (on win7) and IE8 inside a <form> tag as a submit button successfully

[Krishna Prasad Varma]

I request you to answer this question of mine if you have some idea about it. stackoverflow.com/questions/11295378/…

[Mahendar Patel]

So what happens when a search engine crawls your site, sees a link called 'Delete', decides, "Oh, I think I'll follow that link" and starts messing with your database? I was always told that changes should always be performed with non-GET operations for that reason.

[Noz]

He's probably using authorization for delete links, most people do.

[AaronLS]

This to me is the best of both worlds. You get the style you want, and are not using a link or javascript.

[AaronLS]

@Asfand Are you saying this does not work without Javascript?

[Jeshurun]

The only problem I have had with this approach is if there are other buttons in the form, then your form won't submit when pressing the enter key on the keyboard, as one of the other buttons will take precedence. Any known workarounds?

[Simon Cunningham]

@Jeshurun - that doesn't sound like a problem with the buttons, there must be something else going on. Do you have an example with source code to link to? What browser are you seeing this behaviour in?

[levous]

Off topic as the OP wasn't asking about rails but... Rails indeed uses a delete method when integrating this kind of hyperlink via unobtrusive javascript. If someone were to request that link directly, the default would be to present that record, not delete it. See this answer for more detail: stackoverflow.com/a/2809412/252290

[Richard]

I agree with @SimonCunningham, multiple <button>s in the form works fine, and any that are type=submit cause the form to be submitted when the user presses enter. I saw a note that indicates that not all browsers use the same default value for the type attribute, so maybe that was causing Jeshurun's problems?

[Richard]

While this might work, it is certainly not as elegant as using <button type="submit"> and will be harder to maintain.

[Richard]

While this does apply the styling and looks great, it stops the form from being submitted when the user pressed enter in an input field. (Tested on FF17 only)

[Aditya M P]

This was exactly what I was doing. However, the icon did not appear after I added in the <i> tag. It was extremely maddening, till I discovered I needed to clear the cache. If you run into the same problem, folks, hit Ctrl+F5 to clear cache and refresh, and see the glorious icon!

[TimP]

I needed to add onClick="submit();"

[pixelearth]

This is specifically about a submit button, not an anchor tag.

[Armel Larcier]

Clearly the best solution to me. Cheers!

[Grigory Kislin]

Question was about submit

[Calaelen]

This is bootstrap 3 - question was regarding bootstrap 2 format, which uses another format for displaying the icons.

[Ingus]

Any solution for cases when must use input?