How To Change Bootstrap Glyphicon Color?

Today, We want to share with you bootstrap glyphicons color.In this post we will show you Bootstraps change the style of glyphicon with example, hear for how to change bootstraps icon colors to white using css class in bootstraps 3 icons List. we will give you demo and example for implement.In this post, we will learn about BOOTSTRAPs ACCORDION WITH PLUS MINUS ICON with an example.

Font Icons Examples

Example 1: index.html

<!DOCTYPE html>
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<title>Change Bootstraps Icons Colors Example - www.pakainfo.com</title>
</head>
<body>
<i class="glyphicon glyphicon-camera"></i>
<i class="glyphicon glyphicon-camera" style="font-size:50px;"></i>
<i class="glyphicon glyphicon-camera" style="font-size:60px;color:red"></i>
</body>
</html>

How to change Bootstraps icons to green color?

Example 2:

Read Also:  PHP - MySQLi Insert Update Delete CRUD Operation using AngularJS

In Css class:

<style type="text/css">
        .green, .green a {
            color: green;
        }

HTML Content

<div style="background-color:black;color:green">
                   <ul>
                       <li>
                            <span class="glyphiconglyphicon-asterisk green"></span>
                            <span class="glyphicon-class">glyphicon glyphicon-asterisk</span>
                       </li>
                       <li>
                           <span class="glyphicon glyphicon-plus green"></span>
                            <span class="glyphicon-class">glyphicon glyphicon-plus</span>
                       </li>
                         <li>
                            <span class="glyphicon glyphicon-euro green"></span>
                            <span class="glyphicon-class">glyphicon glyphicon-euro</span>
                        </li>
                        <li>
                            <span class="glyphicon glyphicon-eur green"></span>
                            <span class="glyphicon-class">glyphicon glyphicon-eur</span>
                         </li>
                         <li>
                            <span class="glyphicon glyphicon-minus green"></span>
                            <span class="glyphicon-class">glyphicon glyphicon-minus</span>
                         </li>
                     </ul>                
              <div class="clear"> </div>
            </div>

I hope you get an idea about Bootstraps Glyphicon Components.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.