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

我不能给我的字体真棒标签的颜色

相反，我可以给I:before添加颜色，它就可以工作了

但问题是，当我想更改单击时的颜色时，：before元素不起作用

我尝试在{color:green}之前提供类似于I:active:before的css，但没有成功

i:active：：在{color:green}之前

---

我希望输出应该是绿色图标点击..但它只是不工作。请帮助。

您必须使用JavaScript

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

---

使用CSS one的SVG版本？我不使用CSS的SVG版本。remove:：before将起作用我在remove:：before后尝试了它，但它不起作用。请添加代码段