时间戳

首页 > 解决方案 > 无法从 js 调用字体真棒

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

问题描述

我正在使用 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>

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

标签： javascripthtmlcss

解决方案

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>

推荐阅读