CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapbootstrap-4
user45437
user45437

Reputation: 183

How to change color of bootstrap glyphicon .?

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. My Glyphicon Desired glyphicon after click Faulty result on changing the background color on click On changing the color of the glyphicon

Upvotes: 0

Views: 1647

Answers (4)

user45437
user45437

Reputation: 183

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

Upvotes: 0

RaceProUK
RaceProUK

Reputation: 11

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.

Upvotes: 0

D V Yogesh
D V Yogesh

Reputation: 3700

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

you can change how ever you want like color,background-color,padding change it

Upvotes: 1

Subhankar Mitra
Subhankar Mitra

Reputation: 175

Try with this.

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

Upvotes: 1

Related Questions