Add icon to submit button in twitter bootstrap 2

后端未结

关注

 12  1755

被撕碎了的回忆

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 style

相关标签:

12条回答

孤城傲影

2020-12-04 05:57
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>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
伪装坚强ぢ

2020-12-04 05:57
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
北海茫月

2020-12-04 05:59
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":
0 讨论(0)
发布评论:

提交评论
- 加载中...

感动是毒

2020-12-04 05:59

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

0 讨论(0)

萌比男神i

2020-12-04 05:59

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

0 讨论(0)

执念已碎

2020-12-04 05:59

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>

0 讨论(0)

1 2 下一页