CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
hussain
hussain

Reputation: 7083

How to change color of bootstrap glyphicon?

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>

Upvotes: 12

Views: 55882

Answers (6)

Nkosingiphile
Nkosingiphile

Reputation: 21

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>

Upvotes: 2

Syed Shibli
Syed Shibli

Reputation: 1072

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

Upvotes: 0

Andrew
Andrew

Reputation: 447

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

Upvotes: 17

ScaisEdge
ScaisEdge

Reputation: 133360

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

Upvotes: 8

Gowtham
Gowtham

Reputation: 1597

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/

Upvotes: 3

Derick Alangi
Derick Alangi

Reputation: 1100

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>

Upvotes: 1

Related Questions