我想在我的表单输入提交按钮上使用twitter引导图标。
http://twitter.github.com/bootstrap/base-css.html#icons上的例子主要是有样式的超链接。
我最接近的方法是让图标显示在按钮旁边，但不是在按钮里面。
<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>
当前回答
我让它工作，但有几个警告我还没有解决。
不管怎样，是这样的:
以你的平均输入按钮为例:
<input type="submit" class="btn btn-success" value="Save">
从glyphicons精灵文件中剪出你想要的提交按钮图标，确保它是14x14像素的图像。是的，在理想的情况下，你可以重复使用精灵，如果有人能解决这个问题，我很乐意听听怎么做。: -)
一旦你这样做了，你可以像这样为你的输入按钮写css:
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;
}
适用于Firefox 14, Chrome 21
在IE 9中不能工作
tl;dr:通过一点css，你可以自动地把图标放在提交按钮上，但是你需要把图标放在一个单独的文件中，而且在Internet Explorer中行不通。
其他回答
我想这种更好的方法对我来说很好。
<form name="myform">
<!-- form fields -->
<a href="#" class="btn btn-success" onclick="document.myform.submit();">
Submit <i class="icon-plus"></i> Icon
</a>
</form>
我认为你应该尝试这个FontAwesome设计用于Twitter Bootstrap。
<button class="btn btn-primary icon-save">Button With Icon</button>
我想把Twitter引导图标转换成一个基本的Rails表单，然后看到了这篇文章。在搜索了一下之后，我找到了一个简单的方法。不确定您是否在使用Rails，但以下是代码。关键是传递一个块给link_to视图助手:
<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 %>
如果您不使用Rails，下面是带有图标的链接的输出HTML(用于编辑、删除和新提交按钮)
# 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>
这里是最终结果的截图链接: http://grab.by/cVXm
您可以在某处添加一个<a/>图标，并绑定一个JavaScrit动作 向它提交表单。类的名称和值(如有必要) 原始提交按钮的名称+值可以在一个隐藏属性中。这很简单 jQuery，请允许我避免纯JavaScript版本。
假设这是原始形式:
<form method="post" id="myFavoriteForm>
...other fields...
<input class="btn btn-primary" type="submit" name="login" value="Let me in" />
</form>
这样修改:
<form method="post" id="myFavoriteForm">
...other fields...
<a href="#" class="btn btn-primary" id="myFavoriteFormSubmitButton">
<i class="icon-user icon-white"></i> Let me in
</a>
</form>
.．.然后是神奇的jQuery:
$("#myFavoriteFormSubmitButton").bind('click', function(event) {
$("#myFavoriteForm").submit();
});
或者如果你想确保用户总是能提交表单，那就是 换做是我，你可以把正常的提交按钮留在里面 并使用jQuery .hide()隐藏它。它确保登录仍然有效 无需JavaScript和jQuery按正常提交按钮(有 人们使用链接，w3m和类似的浏览器)，但提供 如果可能的话，一个带有图标的花哨按钮。
有一种新的方法可以用bootstrap 3做到这一点:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
在bootstrap glyphicons页面的“如何使用”下面:
