Javascript 字体在CSS伪代码中不起作用

我通过一个工具包使用FontAwesome，当我在CSS中将它用作伪元素时，它就不起作用了

<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/af3b78fe80.js" crossorigin="anonymous"></script>

---

在

.toggle

和

：：before

之间有一个额外的空间

.toggle{
位置：相对位置；
宽度：60px；
高度：60px；
背景色：#da7f8f；
光标：指针；
}
.toggle：：之前{
内容：'\f0c9'；
字体系列：“字体真棒5免费”；
位置：绝对位置；
宽度：100%；
身高：100%；
线高：60px；
字体大小：24px；
字号：900；
颜色：黑色；
}

删除

之间的空格。切换
和
：：在
之前。您还可以使用带有CSS Lint。。。它可以纠正错误，解释原因，还为我们节省了一些时间：），快乐编码。见：
.toggle{
    position: relative;
    width: 60px;
    height: 60px;
    background-color: #da7f8f;
    cursor: pointer;
}
.toggle ::before{
    content: '\f0c9';
    font-family:"Font Awesome 5 Free";
    position: absolute ;
    width: 100%;
    height: 100%;
    line-height: 60px;
    font-size: 24px;
    font-weight: 900;
    color: black;
    
}