减少Glyphicon的重量

Question

有没有办法减轻＆＃34;体重＆＃34; Glyphicons？

我正在使用＆＃34; ok＆＃34; Glyphicon <span class="glyphicon glyphicon-ok"></span>显示如下：

有没有办法减轻重量以产生更薄的剔除而不减小字体大小？将font-weight更改为lighter无效。

Answer 1

使用白色笔划是一种方法

-webkit-text-stroke: 2px white;

Answer 2

您可以在font-weight伪元素上应用::before属性来更改字体权重：

＆＃13;

＆＃13;

.glyphicon {
  font-size: 60px;
}

.glyphicon-light::before {
  font-weight: 100;
}

.glyphicon-thick::before {
  font-weight: 900;
}

＆＃13;

<!-- 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>

＆＃13;

＆＃13;

＆＃13;

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之一。

Answer 4

如果您不想在全局范围内应用不透明度，也可以在glyphicon上使用不透明度。

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