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>

Answer 2

从js更改图标的最佳方法是更改其classList。

document.getElementById('iconsred').classList.add('fa-icon-name-here');

也

document.getElementById('iconsred').classList.remove('fa-old-icon-you-dont-want-anymore-here');

无法从js调用很棒的字体

2 个答案: