Jquery 字体：unicode不适用于5.11.2版

我有以下代码，从中，我真的想帮助我完成以下工作：

为什么图标不显示（它只显示一个正方形）？我在FontAwesome4.7.0中使用了相同的代码，效果很好。但是，它不适用于此版本（5.11.2）

提前感谢您的帮助

$(document).ready(function() {
  $('.toggle').click(function() {
    $('.toggle').toggleClass('active');
    $('.toggle-content').toggleClass('active');
  });
});

一些内容

以下是指向我的代码笔的链接，以防您发现它更简单：

注：我使用SCSS作为CSS预处理器，我的代码笔中包含了指向font awesome的CSS链接

.toggle::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f007";
}

使用前请使用双冒号

---

@Paulie\u D代码来自我的代码笔。我在那里包括了链接。如果你想了解字体的重量，请检查副本。特里奇在过去尝试过这个，但没有字体的重量。我注意到，通过增加字体的重量，它确实有效。请你解释一下原因好吗？字体系列：“免费字体5”；Font awesome为伪元素提供了这个库。此字体系列免费提供。查看我在帖子中分享的链接。该链接包含所有详细信息。如果对您有效，请接受答案。Thanksit部分起作用，因为它有两部分。你的另一个问题没有起作用吗？

<div class="container">
  <div class="wrapper">
    <div class="toggle"></div>
    <div class="toggle-content">
      <p>Some content</p>
    </div>
  </div>
</div>

.toggle::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f007";
}