I have glyphicon-ok in my li element.Initially as per my requirement I am giving green to all glyphicon-ok like this

.glyphicon-ok {
    color: #41be47;
}

One li element is like the below

<li class="active">
    <a href="#"  onclick="return getQuestions(this);"> 
        <span class="glyphicon glyphicon-ok"></span>
        &nbsp;&nbsp;test
        <i class="glyphicon glyphicon-remove pull-right" style="display: block;" ></i>
    </a>
</li>

Now I want to change glyphicon-ok to white color when that particular is clicked.

So what should I write inside

function  getQuestions(id) {
}

I tried

function  getQuestions(id) {

$('span').find('.glyphicon-ok').css('color','#fff');
}

I have glyphicon-ok in my li element.Initially as per my requirement I am giving green to all glyphicon-ok like this

.glyphicon-ok {
    color: #41be47;
}

One li element is like the below

<li class="active">
    <a href="#"  onclick="return getQuestions(this);"> 
        <span class="glyphicon glyphicon-ok"></span>
        &nbsp;&nbsp;test
        <i class="glyphicon glyphicon-remove pull-right" style="display: block;" ></i>
    </a>
</li>

Now I want to change glyphicon-ok to white color when that particular is clicked.

So what should I write inside

function  getQuestions(id) {
}

I tried

function  getQuestions(id) {

$('span').find('.glyphicon-ok').css('color','#fff');
}

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Jul 28, 2014 at 9:40 SpringLearner asked Jul 28, 2014 at 9:35 SpringLearnerSpringLearner 13.9k2020 gold badges8181 silver badges117117 bronze badges 7

• function getQuestions(id) { id.addClass('class name'); } – HoangHieu Commented Jul 28, 2014 at 9:38
• Try color: #41be47 !important; – Arunkumar Vasudevan Commented Jul 28, 2014 at 9:38
• @HoangHieu I want to change the glyphicon-ok color to white, – SpringLearner Commented Jul 28, 2014 at 9:41
• @Neophyte I tried your way but it did not work – SpringLearner Commented Jul 28, 2014 at 9:42
• try this: id.style.color = 'while'; – HoangHieu Commented Jul 28, 2014 at 9:43

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 3

You just need to change the color property in the css. One of the major benefits of an icon font is that you can use font css properties on them. Using the :focus and :active selector to apply these styles would be a better solution than using javascript.

Example

If you do decide to use javascript i would suggest using it only to add/remove a class rather than apply the styling itself.

If you're really willing to do it through javascript:

First option, listens to click on the icon

jQuery(document).ready(function($){
    $('.glyphicon-ok').on("click", function(){
        $(this).css("color", "#FFF000");
    });
});

Demo at: http://jsfiddle/T9Dk9/1/

Second option listens to click on the li element: Add class to the li (not essential, but easier in bigger projectes):

<li class="active clickable">

jQuery(document).ready(function($){
    $('.clickable').on("click", function(){
        $(this).find('.glyphicon').css("color", "#FFF000");
    });
});

http://jsfiddle/T9Dk9/2/

But I guess there will be a method in Bootstrap do define a 'clicked' color for links

Try this

$('[element]').css({
    color:'#ffffff !important',
});

demo Demo here

e on guys you must change class,

if you want that icon must be white alfer click add some class.

try it (on hover for example:)

$('span').hover(
    function(){
        $(this).addClass("white");
    },
    function(){
        $(this).removeClass("white");
    }
});