角字体真棒图标作为 css 中的内容呈现为框

如何解决角字体真棒图标作为 css 中的内容呈现为框

在此处发布此问题之前，我已经浏览了多种资源。我正在使用一个 angular 项目，我尝试使用 ng-select 并用 font-awesome 中的其他内容替换下拉图标。

我使用以下 2 个步骤将 font-awesome 添加到项目中：

ng add @fortawesome/angular-fontawesome
npm install @fortawesome/free-solid-svg-icons

尝试使用以下方法替换 css 中的 ng-select 下拉图标：

.ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow {
  display: none;
}

.ng-select ::ng-deep span.ng-arrow-wrapper::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f078';
}

效果如下

感谢任何输入。这是我正在尝试的 stackblitz 网址：https://stackblitz.com/edit/angular-yrhnot?file=src/app/app.component.css

解决方法

使用 CSS 内容属性添加字体真棒图标的正确方法。

.icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>

<ul style="margin: 0;">
  <li><span class="icon login"></span> <- Login Icon</li>
</ul>

确保您遵循此模式并检查您在 content 中包含的正确 Unicode 代码点