Skip to content Skip to sidebar Skip to footer
Home / Css / Javascript / Twitter Bootstrap

How To Change Inner Color Of Glyphicons In Bootstrap?

Post a Comment
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?"