在Twitter Bootstrap 2中添加图标以提交按钮

我想在表单输入提交按钮上使用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>

您可以使用按钮标签代替输入

<button type="submit" class="btn btn-primary">
  <i class="icon-user icon-white"></i> Sign in
</button>

我认为您可以为此使用标签标签。这是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>

基本上，您将获得输入的标签元素（类型=提交），然后隐藏实际的输入提交。用户可以单击label元素，但仍然可以完成表单提交。

我认为您应该尝试设计用于Twitter Bootstrap的FontAwesome。

<button class="btn btn-primary icon-save">Button With Icon</button>

您可以在图标的某处添加<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>&nbsp;Let me in
   </a>
</form>

...然后是神奇的jQuery：

$("#myFavoriteFormSubmitButton").bind('click', function(event) {
   $("#myFavoriteForm").submit();
});

或者，如果您想确保用户始终可以提交表单（这就是我要穿的鞋子），则可以在表单中保留常规的提交按钮，并使用jQuery .hide（）隐藏它。根据正常的提交按钮（有些人使用链接，w3m和类似的浏览器），它可以确保在没有JavaScript和jQuery的情况下仍然可以正常登录，但是如果可能的话，还可以提供带有图标的精美按钮。

引导程序3有一种新的方法可以执行此操作：

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

它位于引导字形页面上的“如何使用”下：

我想将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

有一种方法可以使（引导程序的）字形图标进入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是单个字形图标的宽度），底部是完整的glyphicons-halflings.png，底部（覆盖整个元素）是与顶部相同的背景渐变。

-48px 0px是搜索图标（icon-search）的缩写，但很容易显示其他任何图标。

如果有人需要:hover效果，则必须再次以相同的形式键入背景。

我可以解决这个问题，但有一些警告尚未解决。

无论如何，这是这样做的：

选择您的平均输入按钮：

<input type="submit" class="btn btn-success" value="Save">

从字形精灵图片文件中剪出想要用于提交按钮的图标，并确保它是14x14像素的图像。是的，在理想情况下，您可以重用Sprite，并且如果有人认为我会很高兴听到它是如何完成的。:-)

完成此操作后，您可以为输入按钮编写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中将无法使用。

我认为这是解决您问题的方法

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

对附加类使用input-append

<div class="input-append">
  <input class="span2" id="appendedPrependedInput" type="text">
  <span class="add-on">.00</span>
</div>

我想这更好的方法，对我来说很好。

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