我使用Angular 2+和Angular CLI.

如何将字体添加到我的项目中?

推荐答案

After Angular 2.0 final release, the structure of the Angular2 CLI project has been changed — you don't need any vendor files, no system.js — only webpack. So you do:

  1. 一百

  2. angular-cli.json文件中找到styles[]数组,并在此处添加font awesome references目录,如下所示:

    "apps": [
        {
          "root": "src",
          "outDir": "dist",
          ....
          "styles": [
              "styles.css",
              "../node_modules/bootstrap/dist/css/bootstrap.css",
              "../node_modules/font-awesome/css/font-awesome.css" // -here webpack will automatically build a link css element out of this!?
          ],
          ...
      }
      ]
    ],
    

    在Angular的较新版本中,使用angular.json文件,而不使用../文件.例如,使用"node_modules/font-awesome/css/font-awesome.css".

  3. 在任何您想要的html文件中放置一些字体令人惊叹的图标:

    <i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i>
    
  4. 停止应用程序Ctrl+c,然后使用ng serve重新运行应用程序,因为观察器仅用于src文件夹,并且不会观察angle-cli.json是否有变化.

  5. 享受你的偶像!

Angular相关问答推荐

Angular前端调用ALB身份验证后的后端并重定向

带逻辑的组件decorator 中的Angular 主机侦听器属性

Angular:将服务注入非独立组件导致应用程序中断

更改物料设计中的复选框勾选 colored颜色

笔刷Angular 为17

要素存储更改根存储状态

MAT-复选框更改事件未在onSubscriberCheck函数中返回选中的值

列表和映射的SCSS语法

如何让 ag-Grid 事件读取私有方法?

Angular AuthGuard:不推荐使用 CanActivate 和 CanActivateChild.如何更换它们?

Nz 树 Select .如何在子 node 中显示父 node 名称?

等待两个订阅完成而不嵌套

使用 RxJS forkJoin 时传递参数的最佳方式

根据变量值更改按钮样式

无法读取 angular2 中未定义(…)的属性 push

运行 npm 测试(Angular 2 单元测试)后无法读取未定义的属性 subscribe

在 Angular 4 中播放声音

BrowserAnimationsModule 和 NoopAnimationsModule 有什么区别?

需要选中一个复选框

来自 chokidar (C:\) 的错误:错误:EBUSY:资源繁忙或锁定,lstat 'C:\DumpStack.log.tmp