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>

I tried to do this for a while with no success. Basically, you cannot add html elements within a button's value. — John Goodman, Feb 21 '12 at 21:30
@JohnGoodman That should be an answer, not a comment. The accepted answer is a work-around, and not a direct reply to the question. — cartbeforehorse, Jul 06 '14 at 12:05

score 415 · Accepted Answer · edited Aug 17 '13 at 18:58

415

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>

edited Aug 17 '13 at 18:58

KyleMit

30,350
66
462
664

answered Feb 22 '12 at 11:33

Simon Cunningham

5,540
1
17
7

12

This works, however please see http://www.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. – Matenia Rossides Mar 03 '12 at 07:22
10

I have tested this in Chrome, Firefox, Safari (on win7) and IE8 inside a
tag as a submit button successfully
– Mr Bell Mar 14 '12 at 21:54
@Asfand Are you saying this does not work without Javascript? – AaronLS Oct 17 '12 at 21:18
4

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? – Jeshurun Nov 01 '12 at 01:00
@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? – Simon Cunningham Nov 01 '12 at 12:47
I agree with @SimonCunningham, multiple – Richard Dec 05 '12 at 09:26
2

This was exactly what I was doing. However, the icon did not appear after I added in the `` 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! – Aditya M P Dec 23 '12 at 01:14
2

I needed to add `onClick="submit();"` – TimP Jan 18 '13 at 11:15
Any solution for cases when must use input? – Ingus Jun 11 '19 at 14:14

score 70 · Answer 2 · edited Aug 17 '13 at 19:09

70

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.

edited Aug 17 '13 at 19:09

KyleMit

30,350
66
462
664

answered Sep 15 '12 at 07:48

Christian Michael

876
8
11

9

This to me is the best of both worlds. You get the style you want, and are not using a link or javascript. – AaronLS Oct 17 '12 at 21:17
1

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) – Richard Dec 05 '12 at 09:30
1

Clearly the best solution to me. Cheers! – Armel Larcier Jul 09 '13 at 11:29

score 14 · Answer 3 · edited Aug 17 '13 at 19:09

14

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>

edited Aug 17 '13 at 19:09

KyleMit

30,350
66
462
664

answered Jul 17 '12 at 07:01

pengemizt

837
1
9
16

score 11 · Answer 4 · edited Aug 17 '13 at 19:09

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.

I request you to answer this question of mine if you have some idea about it. http://stackoverflow.com/questions/11295378/link-to-remote-with-i-tag-sending-direct-request-instead-of-ajax#_=_ — Krishna Prasad Varma, Jul 03 '12 at 07:36

score 8 · Answer 5 · edited Jun 25 '14 at 13:23

8

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

edited Jun 25 '14 at 13:23

Bill the Lizard

398,270
210
566
880

answered May 06 '14 at 23:30

Justin

17,670
38
132
201

score 7 · Answer 6 · answered Apr 04 '12 at 17:11

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

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. — Asfand Qazi, Aug 18 '12 at 16:53
He's probably using authorization for delete links, most people do. — Noz, Oct 05 '12 at 17:15
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: http://stackoverflow.com/a/2809412/252290 — levous, Nov 13 '12 at 17:24
This is specifically about a submit button, not an anchor tag. — pixelearth, May 26 '13 at 03:21

score 6 · Answer 7 · edited Aug 17 '13 at 19:09

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.

While this might work, it is certainly not as elegant as using — Richard, Dec 05 '12 at 09:28

Moeri · Answer 8 · 2012-08-27T22:48:19.990

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.

score 1 · Answer 9 · edited Oct 25 '15 at 13:19

1

I think its a solution for your problem

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

edited Oct 25 '15 at 13:19

MattAllegro

6,455
5
45
52

answered Oct 25 '15 at 12:23

naveen

11
1

score 1 · Answer 10 · answered Jul 20 '16 at 10:09

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

This is bootstrap 3 - question was regarding bootstrap 2 format, which uses another format for displaying the icons. — Calaelen, May 30 '17 at 13:29

score 0 · Answer 11 · answered May 16 '13 at 08:50

0

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>

answered May 16 '13 at 08:50

NimChimpsky

46,453
60
198
311

score -1 · Answer 12 · answered Jan 28 '13 at 10:13

-1

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>

answered Jan 28 '13 at 10:13

Livia

11

Add icon to submit button in twitter bootstrap 2

12 Answers12

Linked