如何在 Bootstrap 中更改字形的内部颜色？

Question

我有一个像这样的空星按钮，

<button type="button" class="btn btn-default btn-lg" id="refresh">
      <span class="glyphicon glyphicon-star-empty"></span>
</button>

当我单击它时，我希望内部颜色变为黄色，如下所示 - http://s21.postimg.org/3qwgsnrcj/star.png

我们如何使用 Bootstrap 和 Javascript 实现这一点？

这是我到目前为止所获得的链接 - http://jsbin.com/refatlefi/edit?html,output

Answer 1

字形就像一个字符。您可以通过更改跨度样式的颜色属性来更改它的颜色。

<button type="button" class="btn btn-default btn-lg" id="refresh">
   <span class="glyphicon glyphicon-star-empty"></span>
</button>

.glyphicon-star-empty {
   color: yellow;
}

但是，您选择的图标未满，因此您无法按要求更改内部。我建议改用“glyphicon glyphicon-star”。

<button type="button" class="btn btn-default btn-lg" id="refresh">
   <span class="glyphicon glyphicon-star"></span>
</button>

.glyphicon-star {
   color: yellow;
}