我想在我的表单输入提交按钮上使用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="text" placeholder="search here" />
<button type="submit"><i class="glyphicon glyphicon-search"></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
有一种新的方法可以用bootstrap 3做到这一点:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
在bootstrap glyphicons页面的“如何使用”下面:
我认为你可以使用标签来达到这个目的。下面是一个推特引导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)，然后你隐藏实际的输入提交。用户可以单击label元素，但仍然可以完成表单提交。
有一种方法，如何获得(bootstrap的)字形输入类型="提交"。使用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 */
}
如果多个背景是重叠的，在顶部将有第一个背景在后台:符号。 所以在顶部是背景，从左边缩进16px (16px是单个象形文字的宽度)，在底层是整个象形文字- hallings .png，在底层(覆盖整个元素)是相同的背景梯度在顶层。
0px是搜索图标(icon-search)的切割，但很容易显示任何其他图标。
如果有人需要一个:悬停效果，背景必须再次键入相同的形式。
我认为这是解决你问题的办法
<input type="text" placeholder="search here" />
<button type="submit"><i class="glyphicon glyphicon-search"></button>
