如何使用纯 JavaScript 切换字体真棒图标的类？答案

【问题标题】：How to toggle class for font awesome icons with pure javascript?如何使用纯 JavaScript 切换字体真棒图标的类？
【发布时间】：2020-08-09 21:18:22
【问题描述】：

我正在尝试学习 javascript，并尝试在单击图标时在空圆圈图标和带有复选标记的圆圈之间切换。但是，它似乎不起作用。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<head>
</head>
<body>
 <i class="far fa-circle" id="toggle"></i>
 <script>
    document.addEventListener('click', (event) =>{
        if(event.target.id == 'toggle'){
            document.getElementById('toggle').classList.toggle("fas fa-check-circle");
        }
    });
 </script>

</body>
</html>

【问题讨论】：

如果你认为你已经得到了event.target（元素！），那么你就不需要再去查询整个DOM来搜索你已经拥有的元素了！（PS：event.target）:)
部分问题是您没有删除原始类far fa-circle

标签： javascript html css font-awesome font-awesome-5

【解决方案1】：

有时，定义你的元素 default CSS 比使用 is-* 类修饰符更有帮助 - 比使用 fas 做一些时髦的事情类。看看：

const EL_tog = document.querySelector('#toggle');

EL_tog.addEventListener('click', () => {
    EL_tog.classList.toggle("is-active");
});

#toggle:before {
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  font-style: normal;
}

#toggle.is-active:before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">

<i id="toggle"></i>

明天，即使您决定使用其他图标集，您也无需更改 HTML，只需更改您的 CSS。到底是什么 - 到底是怎么回事。

如果您想知道我从哪里得到 CSS content: 的十六进制值，例如 \f111 - 而不是 big deal

【讨论】：

它们也可以在这里找到：fontawesome.com/icons/check-circle?style=solid 并且您需要为最后一个图标添加 font-weight:900 因为它是实体版本而不是常规版本

【解决方案2】：

一个想法是使用堆叠图标，你可以只处理一个类：

var icon = document.getElementById('toggle');

icon.addEventListener('click', (event) => {
  icon.querySelector(':last-child').classList.toggle("fa-check-circle");
});

<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>

<span class="fa-stack fa-2x" id="toggle">
  <i class="far fa-circle fa-stack-2x"></i>
  <i class="fas fa-stack-2x"></i> <!-- OR "far" for the other version -->
</span>

【讨论】：

很好的例子！只是 - 在那种情况下，您几乎被 fas 内部结构所困，这些内部结构充其量是奇怪的（关于 HTML 标记）；）
@RokoC.Buljan 我们仍然可以考虑更好的选择器；）

【解决方案3】：

我们可以使用原生 JavaScript 解决这个问题。

只需将onclick 侦听器添加到toggle 元素。然后用fa-check-circle替换类fa-circle。

const circle = 'fa-circle'
const check = 'fa-check-circle'
const toggler = document.getElementById('toggle')
toggle.onclick = () => {
  toggler.classList.toggle(circle)
  toggler.classList.toggle(check)
}

<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<i id="toggle" class="far fa-circle"></i>

另一种方法是使用css，只需使用伪属性before 定义一个新类（即active），如下所示：

#toggle.active::before {
  content: '\f058';
}

现在，我们将onclick 事件添加到toggle 元素以添加或删除active 类：

toggle.onclick = () => {
  toggler.classList.toggle('active')
}

const toggler = document.getElementById('toggle')
toggle.onclick = () => {
  toggler.classList.toggle('active')
}

#toggle.active::before {
  content: '\f058';
}

<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<i id="toggle" class="far fa-circle"></i>

【讨论】：