Geek Answers Handbook

How to change bootstrap glyphicon color?

I want to change the color of the bootstrap glyphicon to yellow because the current color is displayed in white, which looks like the Delete button. How to change the color of glyphicon-folder-close or use any other glyphicon that displays the image in the folder 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>
+7
html css twitter-bootstrap
source share
5 answers

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 advisable to avoid using the inline style - it is better to use classes or links based on external CSS configuration elements

  <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; }
+4
source share

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

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

An answer was also given here.

Change the color of the glyphics to blue in some, but not all, places using Bootstrap 2

+6
source share

Use the following 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 css code

 .yellow { color: #FFCA28; }

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

+2
source share

To change the color, do the following:

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

Just edit the span tag in your code to the above so that your code looks 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>
+1
source share

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

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

// CSS

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

More articles:


All Articles