Reduce the weight of the glyphicon

Question

Is there a way to reduce the "weight" of glyphics?

I use ok "Glyphicon <span class="glyphicon glyphicon-ok"></span>, which looks like this:

Is there a way to reduce weight in order to produce a thinner tick without reducing the font size? Changing font-weightto lighterhas no effect.

Answer 1

Using the back door is the way to do it.

-webkit-text-stroke: 2px white;

Answer 2

You can apply the property font-weightto an alias ::beforeto change 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>

Run codeHide result

Answer 3

.

$(document).ready(function() {
    $( "[.fas || .glyphicon]" ).each(function( index ) {
      var color = $(this).parent().css("background-color");
      $(this).css("-webkit-text-stroke","2px "+color)
    });
});

: .fas .glyphicon.