可以使用CSS的伪元素（pseudo-element）和伪类（pseudo-class）实现这个效果。
首先，需要在HTML中添加一个按钮和一个显示
字体图标的元素，例如：
```html
<button id="change
IconBtn">Change
Icon</button>
<div id="
icon" class="original-
icon">A</div>
```
其中，按钮的id为"change
IconBtn"，显示
字体图标的元素的id为"
icon"，并且初始状态下它的class为"original-
icon"，表示显示的是原来的
字体图标。
接下来，使用CSS为这些元素添加样式。首先，需要为"
icon"元素设置
字体和
字体大小：
```css
#
icon {
font-family: "Font Awesome 5 Free"; /*
字体图标库的名称 */
font-size: 24px;
}
```
然后，使用伪元素和伪类为"
icon"元素添加两个不同的
字体图标。在初始状态下，使用:before伪元素显示第一个
字体图标；在按钮点击后，使用:after伪元素显示第二个
字体图标。同时，为了实现点击按钮后
字体图标的变换效果，可以使用:checked伪类和相邻兄弟选择器（adjacent sibling selector）来实现：
```css
#
icon:before {
content: "\f007"; /* 第一个
字体图标的Unicode编码 */
}
#change
IconBtn:checked + #
icon:after {
content: "\f008"; /* 第二个
字体图标的Unicode编码 */
}
.original-
icon:before {
content: "\f007"; /* 在初始状态下仍显示第一个
字体图标 */
}
.new-
icon:after {
content: "\f008"; /* 在按钮点击后显示第二个
字体图标 */
}
```
最后，为按钮添加点击事件，当它被点击时，将"
icon"元素的class从"original-
icon"变为"new-
icon"，从而触发
字体图标的变换效果：
```javascript
var change
IconBtn = document.getElementById("change
IconBtn");
var
icon = document.getElementById("
icon");
change
IconBtn.addEventListener("click", function() {
icon.classList.toggle("original-
icon");
icon.classList.toggle("new-
icon");
});
```
这样就可以实现一个简单的点击按钮后
字体图标变换的效果了。完整的代码如下：
```html
<!DOCTYPE html>
<html>
<head>
<title>Change
Icon Example</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<style>
#
icon {
font-family: "Font Awesome 5 Free";
font-size: 24px;
}
#
icon:before {
content: "\f007";
}
#change
IconBtn:checked + #
icon:after {
content: "\f008";
}
.original-
icon:before {
content: "\f007";
}
.new-
icon:after {
content: "\f008";
}
</style>
</head>
<body>
<button id="change
IconBtn">Change
Icon</button>
<div id="
icon" class="original-
icon">A</div>
<script>
var change
IconBtn = document.getElementById("change
IconBtn");
var
icon = document.getElementById("
icon");
change
IconBtn.addEventListener("click", function() {
icon.classList.toggle("original-
icon");
icon.classList.toggle("new-
icon");
});
</script>
</body>
</html>
```
441
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
