How to change color of bootstrap glyphicon?

Question

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-close or use any other glyphicon that display folder image better ?

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}` – Morpheus Aug 16 '16 at 15:52 — Morpheus, Aug 16 '16 at 15:52

score 17 · Answer 1 · answered Jun 30 '17 at 02:45

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.

<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

ScaisEdge · Accepted Answer · 2016-08-16T16:11:28.577

8

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

 <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

.mybtn-blue {
   color: blue;
}

edited Aug 16 '16 at 16:11

answered Aug 16 '16 at 15:52

ScaisEdge

131,976
10
91
107

There is no property `text-color` – Morpheus Aug 16 '16 at 15:53
`text-color` should be `color` – Der Aug 16 '16 at 15:54
2

@scaisEdge please do not guide the questioner to write inline styles...that not the correct way. try to add custom class to implement the styles... – vignesh Aug 16 '16 at 16:02
With 30k rep I'm surprised you care about unfair downvotes still. – 4castle Aug 16 '16 at 16:03
Do follow as @Morpheus have the above answer like .glyphicon-folder-c‌lose { color: yellow} – vignesh Aug 16 '16 at 16:03
@vignesh . I agree with you about whether to avoid the use of styles in line .. but in this case OP already has an inline style .. anyway I'll put the recommendation in response. – ScaisEdge Aug 16 '16 at 16:06
Thanks for the answer i will remove inline styling. – hussain Aug 16 '16 at 16:13

score 3 · Answer 3 · answered Aug 16 '16 at 16:08

3

Use the following HTML code

<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

.yellow {
    color: #FFCA28;
}

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

answered Aug 16 '16 at 16:08

Gowtham

1,557
12
24

This is better clean looks seamless – Timothy Mugayi Mar 04 '17 at 17:24

score 2 · Answer 4 · answered Feb 17 '20 at 12:01

2

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>

answered Feb 17 '20 at 12:01

Nkosingiphile

21
1

score 1 · Answer 5 · answered Aug 16 '16 at 15:56

1

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:

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

answered Aug 16 '16 at 15:56

Derick Alangi

1,080
1
11
31

This link will also help you: http://stackoverflow.com/questions/18070322/how-do-i-change-bootstrap-3s-glyphicons-to-white – Derick Alangi Aug 16 '16 at 16:00

score 0 · Answer 6 · answered Aug 03 '17 at 19:39

0

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

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

answered Aug 03 '17 at 19:39

Syed Shibli

992
1
12
15

How to change color of bootstrap glyphicon?

6 Answers6