如何改变bootstrap glyphicon的颜色。

Question

如何更改星形glyphicon的颜色？我的代码是

<span  class="glyphicon glyphicon-star-empty " onclick = "addToFav()">      </span> 

我在点击glyphicon时调用了一个javascript函数。我还想更改glyphicon的颜色，如下图所示。我尝试改变了gyphicon的背景颜色，但它并没有给我所需的输出。 **更新＆＃34;＆＃39;在更改glyphicon的style.color时，它只会更改glyphicon的颜色，但不会用所需的颜色填充glypicon。第一张图片是原始的glyphicon。第二张图像是所需的结果。第三个图像是关于更改glyphicon的背景颜色的glyphicon。第四张图片显示了glyphicon在改变样式时会发生什么。将glyphicon变为红色。  

Answer 1

试试这个。

 <span  class="glyphicon glyphicon-star-empty " onclick = "addToFav(this)"> </span> 
<script>
    function addToFav(ths){
        ths.style.color = "#ffea00";
    }
</script>

Answer 2

 <span class="glyphicon glyphicon-print" style="color:red;background-color:blue;padding:10px"></span>

你可以改变你想要的颜色，背景颜色，填充改变它

Answer 3

如果我正确理解了这个问题，你想将星形从黑色轮廓改为填充黄色星形吗？如果是这样，那么您不仅需要更改样式以设置color，而且还需要将类glyphicon-star-empty替换为类glyphicon-star

Answer 4

以下代码对我来说是最好的。在我的glyphicon班级列表中，我添加了两个，填充星的类和空星的类。空星级写在星级之后，因此它会覆盖填充的星级，因此，最初我在屏幕上得到空的开始。代码如下

<span id="star-glyp"class="glyphicon glyphicon-star glyphicon-star-empty" onclick = "addToFav()">

单击此glyphicon时，我调用addToFav（）函数。在这个函数中，我正在做两件事来产生所需的输出。首先，我将glyphicon的颜色更改为黄色。其次，我从班级列表中删除了glyphicon-star-empty类。代码如下：

 function addToFav(){

                ths = document.getElementById("star-glyp");
                ths.style.color="YELLOW";
                ths.classList.remove('glyphicon-star-empty');
}