General
If you want to target all glyphicons on your site, you may do so using the .glyphicons
class. For example, to change the size of all glyphicons to 24px, you would need to add the following to your Custom CSS:
.glyphicons{
font-size:24px;
}
Style by Type
To target only a specific type of glyphicon (such as the up arrow that was used in the previous example), you should do so using all of the classes that appear in its HTML code. For example, the code for the up arrow glyphicon is <span class="glyphicons glyphicons-arrow-up"></span>
. The two classes that appear (separated by a space) are "glyphicons" and "glyphicons-arrow-up". Therefore, to target this glyphicon in our Custom CSS, we add a period before each class and remove the space inbetween:
.glyphicons.glyphicons-arrow-up{
font-size:24px;
}
Style by Instance
You can always add additional classes to certain glyphicons to get even more specific. For example, say I want to paste another up arrow glyphicon which I want to be blue, but I do not want the other one on this page to change its color. I can add a class "blue-glyphicon" which would result in the following HTML code:
<span class="glyphicons glyphicons-arrow-up blue-glyphicon"></span>
And I would target this glyphicon in my Custom CSS by adding the following CSS code:
.glyphicons.glyphicons-arrow-up.blue-glyphicon{
color:blue;
}
Now I will add the HTML to this page, resulting in a blue up arrow: