时间戳

首页 > 解决方案 > 在 Angular 6 版本中通过 angular-cli.json 导入 font-awesome？

angular - 在 Angular 6 版本中通过 angular-cli.json 导入 font-awesome？

问题描述

我被讲师指定在 angular-cli.json 文件中导入 font-awesome，但我使用的是 angular 6，所以我在 angular.json 文件中初始化了 font awesome 节点模块，但它不工作并且在 ng serve 中出错。

标签： angularsassangular5font-awesome

解决方案

安装包npm install --save font-awesome angular-font-awesome

导入模块：

//...
import { AngularFontAwesomeModule } from 'angular-font-awesome';
@NgModule({
  //...
  imports: [
    //...
    AngularFontAwesomeModule
  ],
  //...
})
export class AppModule { }

如果您使用的是 Angular CLI，请将 font-awesome CSS 添加styles到angular-cli.json 

"styles": [
    "styles.css",
    "../node_modules/font-awesome/css/font-awesome.css"
],

注意：如果使用 SCSS 预处理器，只需将 css 更改为 scss

如果您不使用 CLI，请将样式表导入您的 index.html 文件

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

如果您使用错误的命令安装 font-awesome：

  1. 删除安装的依赖项package.json
  2. node_modules手动 删除文件夹。
  3. 跑npm cache clean --force
  4. 跑npm install
  5. 并执行我上面提到的步骤。

推荐阅读