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

Question

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

- AyKarsi

---

我尝试了一段时间，但没有成功。基本上，您不能在按钮的值中添加HTML元素。 - John Goodman

@JohnGoodman 这应该是一个答案，而不是一个评论。被接受的答案只是一个解决方法，而不是对问题的直接回答。 - cartbeforehorse

Answer 1

您可以使用标签代替标签。

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

- Simon Cunningham

---

这个可以用，但请查看http://www.w3schools.com/tags/tag_button.asp，以获取有关button标签的更多信息及其跨浏览器效果。在使用此功能时要小心，特别是在表单中。 - Matenia Rossides

我已在Chrome、Firefox、Safari（win7上）和IE8内部的<form>标签中测试了这个提交按钮，测试成功。 - Mr Bell

我使用这种方法唯一的问题在于如果表单中有其他按钮，则当按下键盘上的回车键时，您的表单将无法提交，因为其他按钮将优先。有已知的解决方法吗？ - Jeshurun

这正是我正在做的事情。然而，在我添加了<i>标签后，图标并没有出现。这让我非常恼火，直到我发现我需要清除缓存。如果你遇到同样的问题，朋友们，请按下 Ctrl+F5 清除缓存并刷新，然后就能看到美丽的图标了！ - Aditya M P

我需要添加 onClick="submit();"。 - TimP

Answer 2

我认为你可以使用标签来实现此目的。以下是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)获取一个标签元素，然后隐藏实际的提交按钮。用户可以单击标签元素并仍然通过表单提交。

- Christian Michael

---

对我来说，这是两全其美的选择。您可以获得所需的样式，同时不使用链接或JavaScript。 - AaronLS

虽然这样应用样式看起来很棒，但当用户在输入字段中按下回车键时，它会阻止表单被提交。（仅在FF17上测试过） - Richard

对我来说这显然是最好的解决方案。干杯！ - Armel Larcier

Answer 3

我认为你应该尝试使用FontAwesome，它是专门为 Twitter Bootstrap 设计的。

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

- pengemizt

Answer 4

你可以在某个位置添加一个带有图标的<a/>，并绑定一个JavaScript操作来提交表单。如果需要，原始提交按钮的名称和值可以在隐藏属性中提供。使用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，但如果可能的话，提供一个带图标的漂亮按钮。

- Sandor Bedo

---

如果您对此有一些想法，我请求您回答我的这个问题。http://stackoverflow.com/questions/11295378/link-to-remote-with-i-tag-sending-direct-request-instead-of-ajax#_=__ - Krishna Prasad Varma

Answer 5

使用 Bootstrap 3 有一个新方法：

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

在“如何使用”部分，可以在Bootstrap图标页面上找到：

- Justin

Answer 6

我想在一个基本的Rails表单中使用Twitter Bootstrap图标，于是找到了这篇文章。在搜索了一些内容之后，我找到了一个简单的方法来实现它。不确定你是否正在使用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

- Brett Sanders

---

当搜索引擎爬行您的网站时，看到一个名为“删除”的链接，决定“哦，我想我会跟随这个链接”，并开始干扰您的数据库时，会发生什么？ 我总是被告知，出于这个原因，更改应始终使用非GET操作执行。 - Asfand Qazi

他可能正在使用删除链接的授权，大多数人都这样做。 - Noz

虽然这不是关于Rails的问题，但是Rails确实在通过非侵入式JavaScript集成此类超链接时使用了删除方法。如果有人直接请求该链接，则默认情况下会呈现该记录，而不是删除它。有关更多详细信息，请参见此答案：https://dev59.com/eXE85IYBdhLWcg3wYSVk#2809412 - levous

这个问题特别涉及到提交按钮，而不是锚标签。 - pixelearth

Answer 7

有一种方法可以将（bootstrap的）glyphicons放入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（单个glyphicon的宽度为16px）的背景，底部级别是整个glyphicons-halflings.png和与顶部级别相同的背景渐变（覆盖整个元素）。 -48px 0px 是搜索图标 (icon-search) 的裁剪位置，但可以轻松显示任何其他图标。

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

- iiic

---

虽然这样做可能有效，但肯定不如使用<button type="submit">优雅，并且更难维护。 - Richard

Answer 8

我已经让它运行起来了，但还有几个问题需要解决。

无论如何，以下是实现的方法：

拿一个普通的输入按钮:

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

简而言之：使用一些CSS，你可以自动将图标放在提交按钮上，但你需要将图标放在单独的文件中，并且它不会在Internet Explorer中工作。

- Moeri

Answer 9

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

- Ganesh Putta

---

问题是关于“提交”的。 - Grigory Kislin

这是Bootstrap 3 - 问题涉及Bootstrap 2格式，该格式使用另一种显示图标的方式。 - Calaelen

Answer 10

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

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

- naveen