如何让 fontawesome 在 Angular 应用程序上工作

Question

这太疯狂了。在过去三个小时的大部分时间里，我一直在尝试使用除 fa-plus 之外的任何字体真棒符号，但无济于事。

代码：

<!-- This works -->
<button *ngIf="queries.length < 3"
        class="btn slick_button float-start col-1"
        (click)="add_query()">
    <i class="fa-sharp fa-light fa-plus fa-beat-fade fa-2xl" style="color: rgba(255, 255, 255, 0.75);"></i>
</button>

<!-- This does not (for fa-minus or any other sumbol that SHOULD be there) -->
<button *ngIf="queries.length < 3"
        class="btn slick_button float-start col-1"
        (click)="add_query()">
    <i class="fa-sharp fa-light fa-minus fa-beat-fade fa-2xl" style="color: rgba(255, 255, 255, 0.75);"></i>
</button>

angular.json:

"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "node_modules/@fontawesome/fontawesome-free/css/fontawesome.css"
            ],

包.json：

"@fontawesome/fontawesome-free": "^6.4.0"

将其链接为 index.html 中的样式表也无济于事。

我错过了什么？为什么一个 sumbol 有效而其他的无效？！

Answer 1

首先，我相信你正在使用包

@fortawesome/fontawesome-free

，因为npm中没有名为

@fontawesome/fontawesome-free

的包。

好吧，在玩了之后，您安装的包

@fortawesome/fontawesome-free

似乎不像原来的fontawesome，默认情况下它不包含文件

fontawesome.css

中的所有图标。您需要使用

all.css

来获得所有图标。在你的

angular.json

替换：

"node_modules/@fortawesome/fontawesome-free/css/fontawesome.css"

与：

"node_modules/@fortawesome/fontawesome-free/css/all.css"