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>

Graphology

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

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

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

Flattery

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. – Kenwee

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

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

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? – Aguilar

@Aguilar - 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? – Flattery

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? – Rayerayfield

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! – Pinochle

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

Any solution for cases when must use input? – Gingerich

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.

Aestheticism

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

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) – Rayerayfield

Clearly the best solution to me. Cheers! – Stratosphere

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

Diazomethane

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

Titlark

I request you to answer this question of mine if you have some idea about it. #11295878 – Ninnetta

Answer 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":

Cynarra

Answer 6

I wanted to the Twitter Bootstrap icons to a basic Rails form and came across this post. After searching around a bit, I figured out an easy way to do it. Not sure if you're using Rails, but here's the code. The key was to pass a block to the link_to view helper:

<tbody>
    <% @products.each do |product| %>
      <tr>
        <td><%= product.id %></td>
        <td><%= link_to product.name, product_path(product) %></td>
        <td><%= product.created_at %></td>
        <td>
          <%= link_to(edit_product_path(product), :class => 'btn btn-mini') do %>
          Edit <i class="icon-pencil"></i>
          <% end %>

          <%= link_to(product_path(product), :method => :delete, :confirm => 'Are you sure?', :class => 'btn btn-mini btn-danger') do %>
          Delete <i class="icon-trash icon-white"></i>
          <% end %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

<%= link_to(new_product_path, :class => 'btn btn-primary') do %>
    New <i class="icon-plus icon-white"></i>
<% end %>

In case you're not using Rails, here is the output HTML for the links with icons (for an edit, delete, and new submit buttons)

# Edit
<a href="/products/1/edit" class="btn btn-mini">Edit <i class="icon-pencil"></i></a>

# Delete
<a href="/products/1" class="btn btn-mini btn-danger" data-confirm="Are you sure?" data-method="delete" rel="nofollow"> Delete <i class="icon-trash icon-white"></i></a>

# New
<a href="/products/new" class="btn btn-primary">New <i class="icon-plus icon-white"></i></a>

And here's a link to screenshot of the finished result: http://grab.by/cVXm

Fillet

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. – Forwarding

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

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: https://mcmap.net/q/119601/-how-does-rails-3-39-s-quot-data-method-39-delete-39-quot-degrade-gracefully – Podiatry

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

Answer 7

There is one way, how to get (bootstrap's) glyphicons into input type="submit". Using css3 multiple background.

HTML:

<form class="form-search">
   …
   <input type="submit" value="Search">
</form>

and CSS:

.form-search input[type="submit"] {
    padding-left:16px; /* space for only one glyphicon */
    background:-moz-linear-gradient(top,#fff 0%,#eee 100%) no-repeat 16px top,
        url(../images/glyphicons-halflings.png) no-repeat -48px 0,
        -moz-linear-gradient(top,#fff 0%,#eee 100%); /* FF hack */
    /* another hacks here  */
    background:linear-gradient(to bottom,#fff 0%,#eee 100%) no-repeat 16px top,
        url(../images/glyphicons-halflings.png) no-repeat -48px 0,
        linear-gradient(to bottom,#fff 0%,#eee 100%); /* Standard way */
}

If multiple backgrounds are overlaping, at the top will be first background at the background: notation. So at the top is background which is indented 16px from left side (16px is width of single glyphicon), at the bottom level is whole glyphicons-halflings.png and at the bottom level (covers whole element) is same background gradient as at the top level.

-48px 0px is the cut for search icon (icon-search) but it's easy to show any other icon.

If someone need a :hover effect, background must be again typed at the same form.

Toomay

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

Answer 8

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.

Twentytwo

Answer 9

I think its a solution for your problem

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

Qintar

Answer 10

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  
    <button type="button" class="btn btn-info">
      <span class="glyphicon glyphicon-search"></span> Search
    </button>
  </p>
 
    <a href="#" class="btn btn-success btn-lg">
      <span class="glyphicon glyphicon-print"></span> Print 
    </a>
  </p> 
</div>

</body>
</html>

Demona

Question was about submit – Leffert

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

Answer 11

Use input-append with add-on classes

<div class="input-append">
  <input class="span2" id="appendedPrependedInput" type="text">
  <span class="add-on">.00</span>
</div>

Incorporation

Answer 12

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>

Lanark