如何更改引导字形图标的颜色？答案

【问题标题】：How to change color of bootstrap glyphicon?如何更改引导字形图标的颜色？
【发布时间】：2016-12-23 02:10:32
【问题描述】：

我想将引导 glyphicon 颜色更改为“黄色”，因为当前颜色显示为白色，看起来像删除按钮。如何更改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>

【问题讨论】：

.glyphicon-folder-close { color: yellow}

标签： html css twitter-bootstrap

【解决方案1】：

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

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

这里也已经回答了。

Change the color of glyphicons to blue in some- but not at all places using Bootstrap 2

【讨论】：

【解决方案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;
}

【讨论】：

没有属性text-color
text-color 应该是color
@scaisEdge 请不要指导提问者编写内联样式...这不是正确的方法。尝试添加自定义类来实现样式...
拥有 30k 代表，我很惊讶你仍然关心不公平的投票。
Do follow as @Morpheus 有上述答案，如 .glyphicon-folder-c‌lose { color: yellow}

【解决方案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/

【讨论】：

这个比较干净，看起来无缝

【解决方案4】：

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

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

【讨论】：

【解决方案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>

【讨论】：

这个链接也可以帮助到你：stackoverflow.com/questions/18070322/…

【解决方案6】：

您可以将字形图标颜色更改为任何值。请参阅下面给出的示例

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

//css

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

【讨论】：