单击时无法更改字体真棒图标颜色

Question

我无法在 font-awesome 的 i 标签上添加颜色。

相反，我可以为 i:before 赋予颜色，它可以工作。

但问题是当我想改变点击颜色时，:before 元素不起作用。

我试图给 css 像 i:active:before{color:green} 但它不起作用。

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

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

我希望输出应该是单击时的绿色图标..但它不起作用。请帮忙。

Answer 1

你必须使用 JavaScript。

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