<分区>
<分区>
我有以下代码，我真的很想在以下方面帮助我:
为什么图标不显示(只显示一个正方形)？我在 Font Awesome 4.7.0 中使用了相同的代码，它运行良好。但是，它不适用于此版本 (5.11.2)。
预先感谢您的帮助!
$(document).ready(function() {
$('.toggle').click(function() {
$('.toggle').toggleClass('active');
$('.toggle-content').toggleClass('active');
});
});
.hidden {
overflow: hidden;
}
.container {
width: 100%;
height: 1000px;
margin: 0 auto;
background-color: #eee;
}
.wrapper {
background-color: pink;
position: relative;
display: flex;
align-items: center;
}
.toggle {
display: block;
width: 20px;
height: 20px;
float: left;
cursor: pointer;
color: white;
text-align: center;
background-color: green;
margin: 10px;
&:before {
content: '\f085'; // fas fa-cogs
font-family: fontAwesome;
}
}
.toggle.active {
background-color: red;
&:before {
content: '\f00d'; //fas fa-times
}
}
.toggle-content {
display: none;
}
.toggle-content.active{
display: block;
background-color: white;
border: 1px solid black;
position: absolute;
top: 40px;
left: 0;
}
<div class="container">
<div class="wrapper">
<div class="toggle"></div>
<div class="toggle-content">
<p>Some content</p>
</div>
</div>
</div>
这是我的 CodePen 的链接，以防您发现它更容易: https://codepen.io/fergos2/pen/yLLgBRq
P.S.:我使用 SCSS 作为 CSS 预处理器，我的 CodePen 中包含指向 font-awesome 的 CSS 链接。
最佳答案
.toggle::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f007";
}
用双冒号表示using before。
https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
关于jquery - Font-awesome unicode 不适用于版本 5.11.2，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58485530/