如何在twitter bootstrap中使用只有字形图标的按钮
Posted
技术标签:
【中文标题】如何在twitter bootstrap中使用只有字形图标的按钮【英文标题】：How to use buttons with only glyphicons in twitter bootstrap 【发布时间】：2013-10-11 17:07:23 【问题描述】：在 Twitter Bootstrap 3.0 中使用只有一个字形图标的按钮的正确标记是什么？如果我使用以下
<button type="button" class="btn btn-xs btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
我得到这样的东西：
更新：
我对我的样式和@Adrift 的<button> 元素的样式进行了比较，得到了以下结果：
# -- is mine
--webkit-perspective-origin: 12px 8px;
+-webkit-perspective-origin: 12px 11px;
--webkit-transform-origin: 12px 8px;
+-webkit-transform-origin: 12px 11px;
-height: 16px;
+height: 22px;
-text-rendering: auto;
+text-rendering: optimizelegibility;
【问题讨论】：
这里似乎工作正常：jsfiddle.net/52VtD/114 我很困惑...我自己拥有这一切，只需要引导 css。 你的html没问题，应该是这样的。这可能与您将所有内容放在一起的方式有关。当您提供示例（jsfiddle 或其他内容）时，我们可能会提供帮助。 使用file://协议会不会有影响？
看起来不像是专门的glypicon。尝试将按钮内容设置为普通字母。如果它仍然被截断，则问题出在其他地方。当您查看源代码时，在您的按钮上应用 16 像素的高度是什么 css 规则？
【参考方案1】：
（3.0 版之前） 不应该是……
<button type="button" class="btn btn-small btn-danger">
<i class=" icon-trash"></i>
</button>
【讨论】：
考虑扩大你的答案，向提问者解释为什么这会达到预期的结果，可能链接到文档。事实上，这只是微不足道的用处。 好吧，Bootstrap 文档告诉你这样做......另外，glyphicon 图标是用 icon-????在 3.0 之前的版本中。 OP 没有说明他们有什么版本。 抱歉，我正在使用 v.3.0。icon 前缀没有解决任何问题。
您期望得到什么？ 3.0 的风格是扁平化的。【参考方案2】：
似乎有点晚了，但正确答案是：
<button class="btn btn-info" type="button"> <span class="glyphicon glyphicon-refresh"></span> </button>
您必须在 span 类中同时添加 glyphicon 和 glyphicon-type ，而不是元素。祝你好运
【讨论】：
他已经这样做了......不确定这是他问题的“正确答案”吗？ @AngelJosephpiscola ，略有不同： 周围有空格，这与您从换行符获得的“无”不同。 【参考方案3】：尝试在图标跨度后添加一个不间断的空格。
像这样：
<button type="button" class="btn btn-xs btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
【讨论】：
我从没想过...你能解释一下这是为什么吗？ @clapas 因为span必须有内容才能显示，否则没有宽度会崩溃。【参考方案4】：或者您可以将字形图标本身用作按钮
<div id="TrashButton" class="glyphicon glyphicon-trash" style="cursor:pointer"></div>
然后为它设置一个“onclick”方法...
$("#TrashButton").on("click", function ()
//do something
);
【讨论】：
一个潜在的问题是重复点击这个“按钮”。浏览器会尝试突出显示该区域。 是的，这是有道理的。就我而言，我总是将它们与剑道窗口结合使用，所以我从未遇到过这个问题。 这是一个很好的答案，但是您失去了很多按钮功能，例如您无法为 div 提供“禁用”属性等。这些可以被模拟，但这意味着额外的开销和不必要的编码。【参考方案5】：只需使用
<span role="button" class="glyphicon glyphicon-trash btn-lg" onclick="yourFunction()"></span>
【讨论】：
【参考方案6】：您好，我遇到了同样的问题。
我发现 index.html 中缺少<!DOCTYPE html>。
添加此按钮后，按钮立即具有正确的大小。
希望这会有所帮助；）
【讨论】：
以上是关于如何在twitter bootstrap中使用只有字形图标的按钮的主要内容，如果未能解决你的问题，请参考以下文章
Drupal 和 Twitter Bootstrap，跨越视图
如何在 twitter-bootstrap-3 模态框中使用复选框
如何在模态 Twitter Bootstrap 中使用 ajax 插入记录
如何在 twitter 的 bootstrap 2.1.0 中使用新的 affix 插件？