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:0 0 black,0 0 black,0 0 black,0 0 black,0 0 black;
}
.bis.glyphicon-star {
text-shadow:0 0 1px black,0 0 1px black,0 0 1px black,0 0 1px black ;
}<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-default btn-lg" id="refresh">
<span class="glyphicon glyphicon-star"></span>
</button>
<button type="button" class="btn btn-default btn-lg" id="refresh">
<span class="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:
function colorChange(){
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?"