CSS 如何在 twitter bootstrap 中使用只有字形的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19185654/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use buttons with only glyphicons in twitter bootstrap
提问by Sam Selikoff
What is the proper markup for using a button with only a glyphicon in it in Twitter Bootstrap 3.0? If I use the following
在 Twitter Bootstrap 3.0 中使用只有一个字形的按钮的正确标记是什么？如果我使用以下
<button type="button" class="btn btn-xs btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
I get something like this:
我得到这样的东西：
Update:
更新：
I did a diff between the styles on mine and @Adrift's <button>element and got the following:
我对我的样式和@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;
回答by Samuel Hyman
Try adding a non-breaking space after the icon span.
尝试在图标跨度后添加一个不间断空格。
Like this:
像这样：
<button type="button" class="btn btn-xs btn-danger">
<span class="glyphicon glyphicon-trash"></span>
</button>
回答by Eefret
Seems like a little late but the correct answer is:
似乎有点晚了，但正确的答案是：
<button class="btn btn-info" type="button"> <span class="glyphicon glyphicon-refresh"></span> </button>
You have to add both glyphicon and glyphicon-{type} in the span class, a not a element. Good Luck
您必须在 span 类中添加 glyphicon 和 glyphicon-{type} ，而不是元素。祝你好运
回答by Tom Witek
Hi I had the same problem.
I found out that <!DOCTYPE html>was missing in index.html.
After I added this the button had right away the right size.
Hope this helps ;)
嗨，我遇到了同样的问题。我发现<!DOCTYPE html>index.html 中缺少它。添加此按钮后，该按钮的大小立即合适。希望这可以帮助 ;）
回答by MattParra
Or you could just use the glyphicon itself as a button
或者您可以将字形本身用作按钮
<div id="TrashButton" class="glyphicon glyphicon-trash" style="cursor:pointer"></div>
and then set an "onclick" method for it...
然后为它设置一个“onclick”方法......
$("#TrashButton").on("click", function () {
//do something
});
回答by Mr. T
Simply use
<span role="button" class="glyphicon glyphicon-trash btn-lg" onclick="yourFunction()"></span>
只需使用
<span role="button" class="glyphicon glyphicon-trash btn-lg" onclick="yourFunction()"></span>
回答by Greg
(prior to version 3.0) Shouldn't it be ...
（3.0之前的版本）难道不应该是...
<button type="button" class="btn btn-small btn-danger">
<i class=" icon-trash"></i>
</button>
