javascript - 无法从js调用真棒字体

Question

我用 js 调用 font awesome thumb down/up 但它在使用 5.6.3 版本的 font awesome 时不起作用。

JS

function changered() {
   document.getElementById('iconsred').style.content = "f164"; // forecode
   document.getElementById('iconsred').style.fontFamily = "Font Awesome 5 Free"; // fontfamily
}

在此代码中，我已经调用了拇指向下按钮，但我想在单击时更改它并显示已填充的拇指向下按钮

HTML

<i id="iconsred" class="far fa-thumbs-down fa-5x right"></i>

我看到有人在堆栈溢出时问过同样的问题，但我无法从他们的回答中解决我的问题

Answer 1

content 只能用于伪元素 ::before 和 ::after(FontAwesome 用来显示图标)。

不幸的是，这些伪元素不是 DOM 的一部分，因此无法使用 Javascript 访问它们。

相反，添加一个在点击时更改 CSS 类的事件监听器:

iconsred.addEventListener('click', function(event) {
  event.target.classList.toggle('far');
  event.target.classList.toggle('fas');
})

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>

<i id="iconsred" class="far fa-thumbs-down"></i>