如何改变bootstrap glyphicon的颜色？

Question

How do I change the color of my star glyphicon? My code is

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

I am calling a javascript function on the click of glyphicon. I also want to change the color of the glyphicon as shown in the image below. I tried changing the background color of the gyphicon but it doesn't give me the desired output. **Update"' On changing the style.color of the glyphicon, it just changes the color of the glyphicon but doesn't fill the glypicon with the desired color. The first image is the original glyphicon. The second image is the desired result. The third image is the glyphicon on changing the background color of the glyphicon. The fourth image shows what happens to glyphicon on changing style.color of glyphicon to red.

Answer 1

Try with this.

 <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

If I understand the question correctly, you want to change the star from a black outline to a filled yellow star? If so, then you'll need to change not just the style to set the color , but you'll also need to replace the class glyphicon-star-empty with the class glyphicon-star .

Answer 4

The following code worked out the best for me. In my class list for glyphicon, I added both, the class for filled star and the class for the empty star. The empty star class is written after the star class and thus it overrides the filled star class and hence, initially I get the empty start on the screen. The code is as follows

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

On clicking this glyphicon, I call addToFav() function. In this function, I am doing two things to produce the desired output. First, I am changing the color of the glyphicon to yellow. Second, I am removing the glyphicon-star-empty class from my class list. The code is as follows:

 function addToFav(){

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