减少Glyphicon的大小

Question

有没有办法减小Glyphicons的“重量”？

我正在使用"ok" Glyphicon <span class="glyphicon glyphicon-ok"></span>，它显示为：

有没有办法减小其粗细以产生更细的勾号，而不需要缩小字体大小？将font-weight更改为lighter没有任何效果。

- crmpicco

Answer 1

使用白色描边是一种方法

-webkit-text-stroke: 2px white;

- Fadi Chamoun

---

这是一个非标准的功能（https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke），并未出现在任何W3C规范中（http://caniuse.com/#search=text-stroke），因此您的结果可能无法在所有浏览器中正常工作。 翻译：这是一项非标准功能（https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke)，没有列入任何W3C规格（http://caniuse.com/#search=text-stroke），因此你的效果可能不能在所有浏览器上运行。 - joeshmoe301

@joeshmoe301谢谢，它在最新版本的Chrome和Firefox中播放效果很好。 - crmpicco

支持似乎越来越好了，我只是想更新一下。反正对我来说已经可以工作了。 - tyelford

Answer 2

你可以在 ::before 伪元素上应用 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>

- Nisarg Shah

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。

- akbar khalilzadeh

---

这样用纯CSS做不是更好吗？ - Derek Brown

我们无法使用纯 CSS 处理 HTML DOM。如果我们想要影响所有元素以采用具有不同 background-color 的 -webkit-text-stroke，我们必须使用 jQuery。@Derek Brown。 - akbar khalilzadeh

Answer 4

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

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

- clamchoda