Search code examples
javascripthtmlcsstwitter-bootstrapglyphicons

How can I change the color of a Bootstrap 3 glyphicon to white if it's not included in the glyphicon package?

Our project has the Bootstrap 3 glyphicons included in it. However, the glyphicon download package doesn't have the unlock glyphicon. You have to download that one separately and include it by itself. because of this, i'm having a hard time getting it to act like the other glyphicons.

below is the library files where the package of glyphicons are stored and the /public/img folder where i have the unlock glyphicon.

Where my normal glyphicons are stored, in a library

where i have added the glyphicons-unlock.png file

I've tried everything i can think of to turn this icon white.

  <ul class="nav pull-right">
      <li>
        <a id="unlock-all" href="#" title="Unlock All" >
         <span class="glyphicon glyphicons-unlock icon-white" style="color:white;" >
             <img src="/public/img/glyphicons-unlock.png" > 
         </span>   
        </a>
      </li>
</ul>

in my css:

#unlock-all {
  color: #ffffff;

}

.glyphicon.glyphicons-unlock.white {
  color: #ffffff;
}


#unlock-all .glyphicon {
  color: #ffffff;

}

does anyone know what i'm doing wrong? And yes, i know there is another stackoverflow asking this similar question but it does NOT address this specifically and its solution does not work for me.

EDIT: ANSWERED:

used this solution: 

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

     <li>
        <a id="unlock-all" href="#" title="Unlock All" >
        <i class="fa fa-unlock" aria-hidden="true" style="color: #ffffff; background-color:black;"></i>
        </a>
      </li>

and i actually changed the color in css but couldn't figure out how to do that in this "insert code" option. ie:

#unlock-all {
  color: #ffffff;
}
Solution

  • As commenters have said, you can't alter the colour of an image with css.

    I'd be inclined to switch from the glyphicons to the (awsome) fontawsome which you can find here: http://fontawesome.io

    It works in much the same way as the glyphicon set and has many more icons for free.

    This should do what you want once you have included the fontawsone file, which is also available on CDNs as well as direct download:

    <i class="fa fa-unlock"></i>

    As a bonus, as well as being ale to set the colourwith css, there are also classes to get different sizes: http://fontawesome.io/icon/unlock/

    Hope this helps