How To Change Inner Color Of Glyphicons In Bootstrap?
I have an empty-star button like this,
However, the icon you picked is not full, so you can't change the inside as you asked. I would recommend using the "glyphicon glyphicon-star" instead.
<button type="button" class="btn btn-default btn-lg"id="refresh">
<span class="glyphicon glyphicon-star"></span>
</button>
.glyphicon-star {
color: yellow;
}
Solution 2:
You may use a full icon and color then redraw the outside via text-shadow with black or any other color.
.glyphicon-star {
color: yellow;
text-shadow:00 black,00 black,00 black,00 black,00 black;
}
.bis.glyphicon-star {
text-shadow:001px black,001px black,001px black,001px black ;
}<linkhref="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"rel="stylesheet"/><buttontype="button"class="btn btn-default btn-lg"id="refresh"><spanclass="glyphicon glyphicon-star"></span></button><buttontype="button"class="btn btn-default btn-lg"id="refresh"><spanclass="glyphicon glyphicon-star bis"></span></button>Solution 3:
I am not sure about getting it exactly similar to your star.png, while you can use javascript to set css color property on the button or you might want to use background-color property. Here is a simple demo http://jsbin.com/netufaruxa/1/edit?html,js,output
HTML:
<body>
<button id="myBtn"type="button" class="btn btn-default btn-lg"id="refresh">
<span class="glyphicon glyphicon-star-empty"></span>
</button>
</body>
JS:
functioncolorChange(){
if(document.getElementById("myBtn").style.color==""){
document.getElementById("myBtn").style.color="yellow";
}else{
document.getElementById("myBtn").style.color="";
}
}
(function() {
document.getElementById("myBtn").addEventListener("click", colorChange);
})();
Post a Comment for "How To Change Inner Color Of Glyphicons In Bootstrap?"