javascript - 如何更改 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/refatelefi/edit?html,output

Answer 1

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

<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;
}