Can not change font-awesome icon color on click

Question

I am not able to give color on tag of font-awesome.标签上赋予颜色。

Instead I can give color to i:before and it works.

But the problem is when I want to change the color on click, :before element does not work.

I tried to give css like i:active:before{color:green} but it did not work.

    <!--HTML-->
    <i class="fa fa-thumbs-up"></i>

    <!--CSS-->
    i:active::before{color:green}

I expect the output should be the green icon on click..but it just do not work. Please help.

Answer 1

You have to use JavaScript.

let icon = document.querySelector('i');
icon.addEventListener('click',function(){
  icon.style.color = "green";
})

Answer 2

You cannot give color to tag directly instead, you can give color to its parent tag.