jquery - change bootstrap colors glyphicons -

jquery - change bootstrap colors glyphicons -

i'm using glyphicons twitter bootstrap 3. although i've been able icon work , display want them to, having 1 issue can't solve. when click on glyphicon (the thumbs icon ex,) want icon alter color red. reason, can't icon color alter in jquery. can background-color alter know jquery working, not color of icon itself. questions set : how can alter bootstrap icons colors on click?

here illustration i'm working on.

bootstrap css item. place can command color

.glyphicon-thumbs-up:before{ content:"\e125"; color: #7f8c8d; opacity: 0.7; }

html

<a id='liked' href='#' <span class='glyphicon glyphicon-thumbs-up'></span> </a>"

i tried using .css function work. works changing background-color, not color of icon. still have go css that.

jquery / javascript

$(".glyphicon").click(function() { var socialbutton = $(this).attr('id'); // later $(this).css("background-color", "red"); //this works $(this).css("color", "red"); //this doesn't })

since works css, tried utilize toggleclass function

$(".glyphicon").click(function() { var socialbutton = $(this).attr('id'); $(this).toggleclass('likedclicked'); // doesn't })

and placed within of css command it

.likedclicked { content:"\e125"; color: red; opacity: 0.7; /*z-index: 10000; tried changing z-index on hunch. didn't work*/ }

you don't need jquery @ - css. can rid of :before styling, , add together custom class glyphicon so:

<a href='#' ><span class="glyphicon glyphicon-thumbs-up custom"></span></a>

and add together styling .custom , .custom:active click-styling:

.custom{ color:#7f8c8d; opacity:0.7; } .custom:active{ color:red }

here working example: http://www.bootply.com/iajesfrw0t

jquery css twitter-bootstrap