我想在表单输入提交按钮上使用twitter bootstrap图标。
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>
答案 0 :(得分：387)
您可以使用按钮标记而不是输入
<button type="submit" class="btn btn-primary">
<i class="icon-user icon-white"></i> Sign in
</button>
答案 1 :(得分：64)
我认为您可以为此目的使用标签标签。以下是twitter bootstrap HTML导航栏的示例：
<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>
基本上你得到输入的标签元素（type = submit），然后隐藏实际的输入提交。用户可以单击标签元素，并仍然可以使用表单提交。
答案 2 :(得分：14)
我认为你应该试试这个FontAwesome设计用于Twitter Bootstrap。
<button class="btn btn-primary icon-save">Button With Icon</button>
答案 3 :(得分：11)
您可以添加＆lt; a /＆gt;使用图标某处，并绑定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和类似的浏览器），但提供 如果可能的话，带有图标的花哨按钮。
答案 4 :(得分：7)
我想将Twitter Bootstrap图标转换为基本的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
答案 5 :(得分：7)
使用bootstrap 3有一种新的方法：
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
它位于“如何使用”下的bootstrap glyphicons页面：
答案 6 :(得分：6)
有一种方法，如何将（bootstrap的）字形到input type="submit"。使用css3多个背景。
HTML：
<form class="form-search">
…
<input type="submit" value="Search">
</form>
和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 */
}
如果多个背景重叠，则顶部将是background:符号的第一个背景。
所以在顶部是从左侧缩进16px的背景（16px是单个glyphicon的宽度），在底层是整个glyphicons-halflings.png并且在底层（覆盖整个元素） ）与顶层相同的背景渐变。
-48px 0px是搜索图标（icon-search）的剪切，但很容易显示任何其他图标。
如果有人需要:hover效果，则必须再次以相同的格式输入背景。
答案 7 :(得分：4)
我让这个工作，但有一些我还没有解决的警告。
无论如何，这就是它的完成方式：
取你的平均输入按钮：
<input type="submit" class="btn btn-success" value="Save">
从glyphicons sprite文件中剪切出你想要提交按钮的图标，确保它是一个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中不起作用。
答案 8 :(得分：1)
我认为这是解决问题的方法
<input type="text" placeholder="search here" />
<button type="submit"><i class="glyphicon glyphicon-search"></button>
答案 9 :(得分：1)
<!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>
答案 10 :(得分：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>
答案 11 :(得分：-1)
我想这更好的方式，对我来说很好。
<form name="myform">
<!-- form fields -->
<a href="#" class="btn btn-success" onclick="document.myform.submit();">
Submit <i class="icon-plus"></i> Icon
</a>
</form>