I've got the glyphicons in my page, but they are black. How do I set the glyphicons to white?
Bootstrap 3 Glyphicons are actually fonts, so you can scale them and color them as you please. Bootstrap previously used image sprites for icons. To add a glyphicon, add a <span> tag with Bootstrap's . glyphicon class and also the class for the specific glyphicon that you require.
Approach: First, we need to assign the id attribute to the particular glyphicon which you need to customize by using CSS. We can apply the color property to the particular id and change the icon color by using a hex value or normal color. The id is an attribute that is used to access the whole tag.
If you need to change the size of glyphicons, use the CSS font-size property. In this snippet, we'll show some examples and explain them. Let's start with an example, where we increase all the glyphicons and set their font-size to 50px.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With