使用纯Javascript如何为FontAwesome图标切换类？

Question

使用纯Javascript如何为FontAwesome图标切换类？

javascripthtmlcssfont-awesomefont-awesome-5

3

我正在学习 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>

- chibiw3n

1

如果您已经获得了event.target(元素!)，那么没有必要再去查询整个DOM以寻找已经拥有的某个元素！（PS:event.target） :) - Roko C. Buljan

问题的一部分也在于，您没有删除原始类far fa-circle。 - disinfor

3个回答

1

一种想法是使用堆叠图标，您只需要处理一个类：

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>

相关链接: https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons

- Temani Afif

不错的例子！只是在这种情况下，你基本上被困在 fas 内部，而这些内部最好是奇怪的（关于 HTML 标记）;) - Roko C. Buljan

@RokoC.Buljan 我们仍然可以考虑更好的选择器 ;) - Temani Afif

1

我们可以使用普通的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';
}

现在，我们给toggle元素添加一个onclick事件来添加或删除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>

- Teocci

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roko C. Buljan · Accepted Answer

有时候定义元素的默认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的十六进制数值，比如\f111-这不是什么大问题。