css 如何在Twitter Bootstrap 中使用仅包含字形图标的按钮

r1wp621o 于 2023-08-08 发布在 Bootstrap

关注(0)|答案(7)|浏览(163)

在Twitter Bootstrap 3.0中使用只有字形图标的按钮的正确标记是什么？如果我使用下面的

<button type="button" class="btn btn-xs btn-danger">
  <span class="glyphicon glyphicon-trash"></span>
</button>

字符串
我得到这样的东西：
x1c 0d1x的数据

更新：

我对我的和@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;

型

css

来源：https://stackoverflow.com/questions/19185654/how-to-use-buttons-with-only-glyphicons-in-twitter-bootstrap

7条答案

按热度按时间

c86crjj01#

尝试在图标范围后添加一个不间断的空格。
就像这样：

<button type="button" class="btn btn-xs btn-danger">
  <span class="glyphicon glyphicon-trash"></span>&nbsp;
</button>

字符串

赞(0）回复(0）举报 2023-08-08

wqlqzqxt2#

这似乎有点晚，但正确答案是：

<button class="btn btn-info" type="button"> <span class="glyphicon glyphicon-refresh"></span> </button>

字符串
您必须在span类中添加glyphicon和glyphicon-{type}，而不是一个元素。祝你好运

赞(0）回复(0）举报 2023-08-08

brgchamk3#

嗨，我也有同样的问题。我发现index.html中缺少<!DOCTYPE html>。在我添加了这个按钮后，按钮马上就有了正确的大小。希望这有帮助;）

赞(0）回复(0）举报 2023-08-08

v64noz0r4#

（3.0版本之前）不应该是...

<button type="button" class="btn btn-small btn-danger">
  <i class=" icon-trash"></i>
</button>

字符串

赞(0）回复(0）举报 2023-08-08

r7xajy2e5#

或者你可以把象形文字本身当作按钮

<div id="TrashButton" class="glyphicon glyphicon-trash" style="cursor:pointer"></div>

字符串
然后为它设置一个“onclick”方法...

$("#TrashButton").on("click", function () {

    //do something

});

型

赞(0）回复(0）举报 2023-08-08

8oomwypt6#

简单地使用<span role="button" class="glyphicon glyphicon-trash btn-lg" onclick="yourFunction()"></span>

赞(0）回复(0）举报 2023-08-08

eufgjt7s7#

从Bootstrap 5开始，使用Bootstrap Icons的方法是：

<button type="button" class="btn btn-success">
  <i class="bi bi-telephone-plus"></i>
</button>

字符串

赞(0）回复(0）举报 2023-08-08

我来回答

css 如何在Twitter Bootstrap 中使用仅包含字形图标的按钮

7条答案

相关问题

热门标签

最新问答