html - 是否可以在表单提交按钮中使用 Glychicons？

Question

我制作带有字形图标的按钮没有问题，但我总是创建一个<a class="btn...". 这不起作用：<input type="submit" class="btn btn-default" value="" />. 它只会产生一个空白按钮。

任何想法如何做到这一点？

score 1 · Accepted Answer

过去我在使用<input>标记方面确实遇到了问题。也许你可以试试那个<button>。

这是 bootsrap doc 中所做的：

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

如果需要，请参阅有关 glyphicons 的引导文档。

希望它可以帮助你：p

score 0 · Accepted Answer

Glyphicons 使用“after”或“before”伪元素，非容器标签或自关闭标签（如输入）不支持这种元素。因此，如果您希望使用输入提交（是的，我了解您，我以前去过那里），像这样重新创建它：

<span class="glyph class here"><input type="submit" value="whatever" /></span>

编辑，需要对跨度进行一些调整，您需要使其看起来像一个按钮，然后对内部的提交按钮进行更多调整：

input[type="submit"] {
        display: inline-block;
        background-color: transparent;
        border: 0;
        cursor: pointer;
    }

score 0 · Accepted Answer

这可以在仍然使用 Form Helper 方法时完成。在此处查看解决方案：如何将 Twitter Bootstrap 的 glyphicons 与 Rails 的 button_to 一起使用

3 回答 3