web-dev-qa-db-ger.com

Reduzieren Sie das Gewicht eines Glyphicons

Gibt es eine Möglichkeit, das "Gewicht" von Glyphicons zu reduzieren?

Ich verwende das Glyphicon " ok " <span class="glyphicon glyphicon-ok"></span>, das folgendermaßen angezeigt wird:

 enter image description here

Gibt es eine Möglichkeit, das Gewicht zu reduzieren, um einen dünneren Tick zu erzielen, ohne die Schriftgröße zu verringern? Das Ändern von font-weight in lighter hat keinerlei Auswirkungen.

7
crmpicco

Die Verwendung eines weißen Strichs ist eine Möglichkeit, dies zu tun

-webkit-text-stroke: 2px white;
17
Fadi Chamoun

Funktioniert mit Anderer Hintergrundfarbe.

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

Hinweis: Wählen Sie einen von .fas oder .glyphicon.

0
afshin

Sie können die Eigenschaft font-weight auf das Pseudoelement ::before anwenden, um die Schriftstärke zu ändern:

.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>
0
Nisarg

Sie können die Deckkraft auch für die glyphicon verwenden, wenn Sie dies nicht global anwenden möchten.

<span style="opacity:0.25;" class="glyphicon glyphicon-ok"></span>
0
clamchoda