web-dev-qa-db-ja.com

グリフィコンの重量を減らす

グリフィコンの「重量」を減らす方法はありますか？

私は " ok " Glyphicon <span class="glyphicon glyphicon-ok"></span>を使用しています。これは次のように表示されます。

enter image description here

フォントサイズを小さくせずに、重みを減らしてティックを薄くする方法はありますか？ font-weightをlighterに変更しても何の効果もありません。

htmlcsstwitter-bootstrapfontsglyphicons
9
crmpicco

白いストロークを使用することはそれを行う方法です

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

Different background-colorで動作します。

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

注意：.fasまたは.glyphiconのいずれかを選択してください。

0
afshin

font-weight疑似要素に::beforeプロパティを適用して、フォントの太さを変更できます。

.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

これをグローバルに適用したくない場合は、glyphiconで不透明度を使用することもできます。

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