Menu
Is there a way to reduce the "weight" of Glyphicons?
I am using the "ok" Glyphicon <span class="glyphicon glyphicon-ok"></span> which displays like this:
Is there any way to reduce the weight to produce a thinner tick without reducing the font size? Changing the font-weight to lighter has no effect whatsoever.
748
Solution with the CSS font-size property 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.
What are Glyphicons? Glyphicons are icon fonts which you can use in your web projects. Glyphicons Halflings are not free and require licensing, however their creator has made them available for Bootstrap projects free of cost.
The Glyphicons are a set of symbols and icons to understand more effectively and easily in web projects. The Glyphicons are used for some texts, forms, buttons, navigation, and etc. The bootstrap has many Glphyicons but there has a standard format to display icons.
Free Alternatives to Glyphicons You can use both Font Awesome and Github Octicons as a free alternative for Glyphicons.
Using white stroke is a way to do it
-webkit-text-stroke: 2px white;
You could apply the font-weight property on ::before pseudo element to alter the font-weight:
.glyphicon {
font-size: 60px;
}
.glyphicon-light::before {
font-weight: 100;
}
.glyphicon-thick::before {
font-weight: 900;
}<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<span class="glyphicon glyphicon-search glyphicon-light"></span>
<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-search glyphicon-thick"></span>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
