Html 如何更改引导程序字形的颜色?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/38979338/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 13:42:33  来源:igfitidea点击:

How to change color of bootstrap glyphicon?

htmlcsstwitter-bootstrap

提问by hussain

I want to change bootstrap glyphicon color to "yellow" because current color is showing in white that looks like Delete button. How can i change color of glyphicon-folder-closeor use any other glyphicon that display folder image better ?

我想将 bootstrap 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>

采纳答案by scaisEdge

Use color

使用颜色

 <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>

But remember that it is desirable to avoid the use of inline style is better use classes or references based on external css configuration items

但请记住,最好避免使用内联样式,最好使用基于外部 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>

edn for external css

用于外部 css 的 edn

.mybtn-blue {
   color: blue;
}

回答by Andrew

You can also change the icon/text by adding to the class "text-success" for green, "text-danger" for red etc. This will change the color of the icon itself.

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

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

Also this has been answered here.

这也在这里得到了回答。

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

使用 Bootstrap 2 在某些地方将字形的颜色更改为蓝色 - 但不是在所有地方

回答by Gowtham

Use the following HTML code

使用以下 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>

And the css code

和 css 代码

.yellow {
    color: #FFCA28;
}

here is the demo http://jsfiddle.net/S3R23/1217/

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

回答by Nkosingiphile

You can change color of the icon by directly specifying color name, however this will only apply to targeted icon.

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

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

回答by Derick Alangi

To change the color, do this:

要更改颜色,请执行以下操作:

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

Just edit the span tag in your code to the one above, making your code to look like this:

只需将代码中的 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>

回答by Syed Shibli

You can change glyphicon color to any value. see below given example

您可以将字形颜色更改为任何值。见下面给出的例子

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

//css

//css

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