How to change inner color of glyphicons in Bootstrap?

Question

I have an empty-star button like this,

<button type="button" class="btn btn-default btn-lg" id="refresh">
      <span class="glyphicon glyphicon-star-empty"></span>
</button>

When I click it, I want the inner color to change to yellow like shown here - http://s21.postimg.org/3qwgsnrcj/star.png

How can we achieve this using Bootstrap and Javascript?

Here's a link to what I've got so far - http://jsbin.com/refatelefi/edit?html,output

Answer 1

A glyphicon is like a character. You can change it's color by changing the color property of the span style.

<button type="button" class="btn btn-default btn-lg" id="refresh">
   <span class="glyphicon glyphicon-star-empty"></span>
</button>

.glyphicon-star-empty {
   color: yellow;
}

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