堆栈引导字形图标答案

【问题标题】：Stack bootstrap glyphicons堆栈引导字形图标
【发布时间】：2022-03-25 20:48:22
【问题描述】：

我正在使用以下引导图标

class="glyphicon glyphicon-plus"

我想改变按钮的颜色，我使用以下但是现在我希望加号图标会像这样在圆圈中，我该怎么做？

    i.glyphicon {
        color: white;
    }

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

另一个名为font-awesome 的图标包具有更好的灵活性和将图标堆叠在一起的功能。包含 Glyphicons 的 Bootstrap 3 没有太多选择，所以我从 font-awesome 中取出 CSS 并将其用于 Glyphicon。

HTML 看起来像：

<span class="glyphicon-stack">
<i class="glyphicon glyphicon-circle glyphicon-stack-2x"></i>
<i class="glyphicon glyphicon-plus glyphicon-stack glyphicon-stack-1x"></i>
</span>

主要的 CSS：

.glyphicon-stack {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: middle;
}

.glyphicon-circle{
position: relative;
border-radius: 50%;
width: 100%;
height: auto;
padding-top: 100%;
background: black;
}

.glyphicon-stack-1x {
line-height: inherit;
}

.glyphicon-stack-1x, .glyphicon-stack-2x {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}

对于图标的样式（颜色、大小），您可以创建更多的 css 类属性并添加到相应的图标中。

看看这个example.

【讨论】：

谢谢，但我应该如何添加你提到的所有类，因为我的代码是这样的新
@shopiaT 尝试将<span>..</span> 放在锚标签内。
你的意思是这样吗？因为这不起作用新
@shopiaT 你没有看到圆圈内的任何图标吗？您能否粘贴您尝试过的代码（可能是bootply）和您看到的屏幕截图？
“Bootstrap 2.3 使用了超棒的字体图标” False。 Bootstrap 本身从未使用过 Font Awesome。

【解决方案2】：

您可以向该元素添加一些简单的 css 规则，例如：

i {
    background: green;
    padding: 3px;
    border-radius: 100%;
    color: white;
}

你可以抽象它，创建两个类，比如 i.circle.green，然后在它们之间拆分这些规则，这样你就不会覆盖默认的引导类。

【讨论】：

嗨格雷戈里奥 +1 ,1。边界半径被破坏，“这是我得到的错误，还有其他我可以使用的东西吗？2.这是一种将加号加粗或将其线条更改为更大一点的方法？跨度>
你只需要border-radius: 50%;得到一个圆圈，但无论如何我可能会把 i 元素塞进一个跨度内
不幸的是，Glyphicons 的权重不可配置...对于边界半径，“已弃用”是什么意思？我猜它不适用于 ie 旧版本，但您可以使用 Pie 库来填充一些 css3 规则，包括边框半径。
我的问题是我有以下 div，在它下面我有桌子，我希望按钮在桌子的顶部，它们之间的空间很小，当我添加
空间是长，当我删除它时，它很短，我怎样才能将它向上移动一点？这是代码
新

【解决方案3】：

尝试使用 .circle 类包装图标。

【讨论】：

【解决方案4】：

如前所述，您可以这样做：

HTML

<div class='test'><span class="glyphicon glyphicon-plus"></span></div>
<span class="glyphicon-class">.glyphicon .glyphicon-plus</span>

CSS

.test{
    width:25px;
    height:25px;
    background: green;
    padding: 3px;
    border-radius: 100%;
    color: white;
    text-align:center
}

http://jsfiddle.net/InferOn/AtmNr/5/

【讨论】：

感谢 Infer-on +1，我还有第二个问题 1.我应该如何使白色的 + 像粗体一样，我希望它更厚？2.我应该怎么做这个按钮并将其向上移动一点，因为当前圆圈位于某个元素的顶部...
您应该向我们提供更多您的标记，可能另一个问题会更合适
我的问题是我有以下 div，在它下面我有桌子，我希望按钮在桌子的顶部，它们之间的空间很小，当我添加
空间是长，当我删除它时，它很短，我怎么能把它向上移动一点？这是代码
新
@shopiaT 你应该认真编辑你的问题（提供额外的标记来确定你需要什么）或者（更好）提出一个新问题（提供所有标记来确定你需要什么）祝你有美好的一天:)

【解决方案5】：

这可以通过以下方式在 Bootstrap 中本地完成：

<i class="d-flex justify-content-center align-items-center position-relative bi bi-circle lh-1" style="font-size: 15rem; color: cornflowerblue;">
   <i style="font-size: 8rem;" class="position-absolute bi bi-card-checklist"></i>
</i>

【讨论】：

好答案 - 仅供参考 - 这是用于引导程序 5