Angular项目中Font Awesome仅fa-plus可用的问题排查

核心问题 #

你用的fa-light是Font Awesome Pro版本专属的样式，免费版（@fontawesome/fontawesome-free）不包含Light系列图标，这就是为什么只有个别图标能显示，其他都不行。另外，你的angular.json里只引入了基础的fontawesome.css，没有加载免费版对应的图标样式文件，导致免费图标也无法正常加载。

解决步骤 #

1. 替换为免费版支持的样式类 #

把fa-light换成免费版支持的样式：

• 实心图标用fa-solid
• 空心图标用fa-regular（注意：免费版仅部分Regular图标可用）
• 品牌图标用fa-brands

比如你的减号按钮可以改成：

<!-- 改用免费版的实心减号图标 -->
<button *ngIf="queries.length < 3"
        class="btn slick_button float-start col-1"
        (click)="add_query()">
    <i class="fa-solid fa-minus fa-beat-fade fa-2xl" style="color: rgba(255, 255, 255, 0.75);"></i>
</button>

2. 修正Angular样式配置 #

在angular.json里，把fontawesome.css替换成免费版的完整样式文件all.css，这样能加载所有免费图标：

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

也可以按需引入单独的样式文件，比如只加载实心图标：

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

3. 验证配置 #

修改后重启Angular开发服务器，确保样式文件被正确加载，之后就能正常使用所有免费版支持的图标了。

内容的提问来源于stack exchange，提问作者Michael