如何更改Bootstrap glyphicon的颜色？

Question

我希望将bootstrap图标的颜色更改为"黄色"，因为当前的颜色显示为白色，看起来像是删除按钮。我该如何更改glyphicon-folder-close的颜色或使用其他展示文件夹图片更好的图标？

main.html

<button type="button" class="btn btn-info btn-lg" ng-click="serverFiles()" style="margin-left: 10px"><span class="glyphicon glyphicon-folder-close"></span></button>

- hussain

---

.glyphicon-folder-close { color: yellow} 可以翻译为“.glyphicon-folder-close { color: yellow}”，意思是将 class 为 .glyphicon-folder-close 的图标变成黄色。 - Morpheus

Answer 1

您还可以通过将类“text-success”添加到绿色，“text-danger”添加到红色等来更改图标/文本。这将更改图标本身的颜色。

<span class="glyphicon glyphicon-usd text-success"></span>

这个问题在这里已经得到了解答。

如何使用Bootstrap 2将一些但不是所有的glyphicons颜色更改为蓝色

- Andrew

Answer 2

使用颜色

 <button type="button" 
      class="btn btn-info btn-lg" ng-click="serverFiles()"
      style="margin-left: 10px; color:#FF0000;">
          <span class="glyphicon glyphicon-folder-close"></span></button>

但要记住，最好避免使用内联样式，而是使用基于类或引用的外部 CSS 配置项。

 <button type="button" 
      class="btn btn-info btn-lg mybtn-blue" ng-click="serverFiles()"
      style="margin-left: 10px;">
          <span class="glyphicon glyphicon-folder-close"></span></button>

用于外部 CSS 的 EDN

.mybtn-blue {
   color: blue;
}

- ScaisEdge

---

text-color 应该改为 color。 - Der

@scaisEdge请不要引导提问者编写内联样式...那不是正确的方法。尝试添加自定义类来实现样式... - vignesh

有30k的声望，我很惊讶你仍然关心不公正的踩。 - 4castle

请按照 @Morpheus 的答案进行操作，如下所示：.glyphicon-folder-close { color: yellow } - vignesh

谢谢您的回答，我会移除内联样式。 - hussain

Answer 3

使用以下HTML代码。

<button type="button" class="btn btn-info btn-lg" ng-click="serverFiles()" style="margin-left: 10px"><span class="glyphicon glyphicon-folder-close yellow"></span></button>

并且CSS代码

.yellow {
    color: #FFCA28;
}

这是演示 http://jsfiddle.net/S3R23/1217/

- Gowtham

---

这样看起来更加清晰，无缝。 - Timothy Mugayi

Answer 4

您可以直接指定颜色名称来更改图标的颜色，但这只适用于目标图标。

<a href="#" class="glyphicon glyphicon-exclamation-sign"  style="color: red; font-size: 20px"></a>

- Nkosingiphile

Answer 5

要改变颜色，请按照以下步骤进行：

<span class="glyphicon glyphicon-folder-close" style="color:#ffff00"></span>

只需编辑您代码中的span标签，使您的代码看起来像这样：

<button type="button" class="btn btn-info btn-lg" ng-click="serverFiles()" style="margin-left: 10px"><span class="glyphicon glyphicon-folder-close" style="color:#ffff00"></span></button>

- Derick Alangi

---

这个链接也会对你有所帮助：https://dev59.com/nGMl5IYBdhLWcg3w3aA- - Derick Alangi

Answer 6

您可以将 glyphicon 的颜色更改为任何值。请参见下面的示例：

<span aria-hidden="true" class="glyphicon form-control-feedback glyphicon-ok"></span>

//css

 .glyphicon.form-control-feedback.glyphicon-ok{
  color: #20032d !important;  
}

- Syed Shibli