67

I've got the glyphicons in my page, but they are black. How do I set the glyphicons to white?

Adrift
  • 58,167
  • 12
  • 92
  • 90
user2654833
  • 701
  • 1
  • 6
  • 8
  • 3
    glyphicons is font, not image. so you can use css font property to style it. (include color, rotate, zoom). y – caoglish Aug 06 '13 at 03:05
  • 1
    This question was incorrectly marked as a duplicate (or at least pointed to a question that is not a duplicate). This question refers to bootstrap-3 where the icons are represented by the glyphicons font (not an image asset). The question referred to by the duplicate flag refers to older bootstrap which used images for icons. While it mentions many alternatives it never succinctly answered this specific question sufficiently that I would call a duplicate. I found the accepted answer here simplistically helpful. – BenSwayne Dec 23 '13 at 02:58

1 Answers1

140

You can just create your own .white class and add it to the glyphicon element.

.white, .white a {
  color: #fff;
}

<i class="glyphicon glyphicon-home white"></i>
dodgerogers747
  • 3,325
  • 9
  • 34
  • 55
  • 1
    @kba: Admittedly, I don’t use Bootstrap, but [Bootstrap 3](http://getbootstrap.com/css/#glyphicons) → [Glyphicons for Bootstrap](http://glyphicons.getbootstrap.com/) → [repository](https://github.com/twbs/bootstrap-glyphicons) → [webfonts](https://github.com/twbs/bootstrap-glyphicons/blob/gh-pages/less/bootstrap-glyphicons.less). Seems to check out. – Ry- Aug 06 '13 at 01:36
  • I am talking about Bootstrap 3. Bootstrap 3 uses glyphicons, while Bootstrap 2 uses icon. I found out anyway. I placed it into a
  • , in which it inherited the css of it.
    • – user2654833 Aug 06 '13 at 01:41
  • 3
    I did a similar thing, but gave the CSS class a bootstrap-esque name 'glyphicon-inverse' instead. – Adrian Thompson Phillips Aug 29 '13 at 10:45
  • 1
    All glyphicons have an inverse. That is, another icon which is opposite color (black & white). CSS seems superfluous in my eyes. – RealDeal_EE'18 Nov 25 '13 at 23:42
  • 5
    It may be better to make the CSS selector `.glyphicon.white` for specificity, etc. – Andrew Mao Apr 15 '14 at 19:53