Fontawesome 图标未显示在 Angular 项目中

Question

我已经使用 npm 安装了 fontawesome

npm install --save font-awesome

然后我将 css 添加到我的 angular.json 中，如下所示：

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/font-awesome/css/font-awesome.min.css",
          "src/styles.css"
        ],

然后我将其添加到我的 html 文件中：

<button type="button" class="btn btn-outline-primary">
    <i class="fa fa-arrow-left"></i>
  </button>

我的网页上显示一个空按钮，我做错了什么？

Answer 1

    You can give the address in the styles.scss instead of the address in the package
    this way should work

@import“~font-awesome/css/font-awesome.min.css”；

Answer 2

如果你想升级到 Angular 形式的 FontAwesome

可以通过以下方式解决：

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free--svg-icons
npm install --save @fortawesome/angular-fontawesome 

检查以确保您拥有适合您的 Angular 版本的 angular-fontawesome 版本。

添加/编辑以下文件：

角度模块.ts

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

角度组件.ts

import {FaIconLibrary, FontAwesomeModule} from '@fortawesome/angular-fontawesome';
import {far} from '@fortawesome/free-regular-svg-icons';
import {fas} from '@fortawesome/free-solid-svg-icons';

constructor(
   library: FaIconLibrary,
) {
  library.addIconPacks(fas, far);
}

将所有图标标签编辑为

<fa-icon [icon]="['fas', 'icon-name']" >

Answer 3

出现此问题是因为字体文件丢失。所以你需要一种方法将你的字体文件包含在你的 css 中。

在您的

styles.scss

文件中添加： 只需检查

node_modules

文件夹中的相对路径即可。

$fa-font-path : "~@fortawesome/fontawesome-free/webfonts";
@import '../node_modules/@fortawesome/fontawesome-free/scss/fontawesome';

Answer 4

正确的步骤是：

1. 在项目文件夹中：npm install font-awesome （如果 npm 大于 5，则无需 --save）
2. 转到angular.json，在“styles”中添加这一行： “./node_modules/font-awesome/css/font-awesome.css”
3. 重新启动服务器（再次control-C和ngserve）即可看到效果。
4. 如果不起作用，请确保您在官方 font-awesome 网站中看到图标代码的正确代码。

注意： 某些版本的 Angular 需要是： ../node_modules/font-awesome/css/font-awesome.css