如何在Angular 2+；CLI项目

我使用Angular 2+和Angular CLI

---

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

经过一些实验，我成功地实现了以下功能：

使用npm安装：

npm install font-awesome --save

添加到angular cli build.js文件：

vendorNpmFiles : [
    font-awesome/**/*.+(css|css.map|otf|eot|svg|ttf|woff|woff2)',
]

添加到index.html

<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">

---

关键是在angular-cli-build.js文件中包含字体文件类型

---

+（css | css.map | otf | eot | svg | ttf | woff | woff2）使用

Angular2

RC5和

angularcli1.0.0-beta.11网页包8

您可以通过css导入实现这一点

只需安装字体：

npm install font-awesome --save

然后在一个配置的样式文件中导入字体：

@import '../node_modules/font-awesome/css/font-awesome.css';

---

（样式文件在angular cli.json中配置）

Angular2.0最终版本发布后，Angular2 cli项目的结构已更改-您不需要任何供应商文件，不需要system.js-仅网页包。所以你会：

npm安装字体-保存

在

angular cli.json

文件中，找到

style[]

数组，并在此处添加字体引用目录，如下所示：

"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\u modules/font awesome/css/font awesome.css”

在所需的任何html文件中放置一些字体图标：

停止应用程序Ctrl+c，然后使用

ng serve

重新运行应用程序，因为监视程序仅用于src文件夹，并且不会观察angular-cli.json的更改

享受你的偶像

---

如果您使用的是SASS，您可以通过npm安装它

npm install font-awesome --save

并将其导入您的

/src/styles.scss

，方法是：

$fa-font-path: "../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome.scss";

---

提示：尽可能避免弄乱

angular cli

infrastructure.）

最重要的答案有点过时，还有一个稍微简单一点的方法

通过npm安装

npm安装字体-保存

在

style.css中：

$fa-font-path: "dist/assets/font-awesome/fonts";
@import "~font-awesome/scss/font-awesome.scss";

$fa-font-path: "~font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome";

// in angular.json
"build": {
"options": {
"styles": [
  "src/styles.scss"
],
}
}

$fa-font-path : '../node_modules/font-awesome/fonts';

@import'~font-awesome/css/font-awesome.css'

或者使用您的
样式.scss
：

$fa-font-path: "dist/assets/font-awesome/fonts";
@import "~font-awesome/scss/font-awesome.scss";

$fa-font-path: "~font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome";

// in angular.json
"build": {
"options": {
"styles": [
  "src/styles.scss"
],
}
}

$fa-font-path : '../node_modules/font-awesome/fonts';


$fa字体路径：“~font-awesome/font”；
@导入“~font-awesome/scss/font-awesome”

编辑：如注释中所述，字体行必须在较新版本上更改为
$fa字体路径：“../../../node\u modules/font-awesome/font”

使用

~

将使sass查看

节点\u模块

。这样做比使用相对路径更好。原因是，如果您在npm上上载一个组件，并在组件SCS中导入font awesome，那么它将与~一起正常工作，而不是与相对路径一起工作，而在这一点上，相对路径将是错误的

此方法适用于任何包含css的npm模块。它也适用于SCS但是如果将css导入到styles.scss中，它将不起作用（反之亦然）

使用LESS（非SCSS）和Angular 2.4.0以及标准网页包（非Angular CLI），以下内容对我很有用：

npm install --save font-awesome

和（在我的app.component.less中）：

当然，您可能需要这个明显且非常直观的代码片段（在webpack.conf的module.loaders中）

加载程序用于修复此类网页包错误

"Module parse failed: \node_modules\font-awesome\fonts\fontawesome-webfont.svg?v=4.7.0 Unexpected token (1:0)" 

---

regexp与这些svg引用相匹配（有或没有版本规范）。根据您的网页设置，您可能不需要它，或者您可能需要其他内容。

在角度项目中使用字体有三个部分

装置

样式（CSS/SCSS）

用在角上

安装

从NPM安装并保存到package.json

npm install --save font-awesome

造型 如果使用CSS

插入到style.css中

@import'~font-awesome/css/font-awesome.css'；

造型 如果使用SCS

插入到您的style.scss中

$fa字体路径：“../node\u modules/font-awesome/font”；
@导入“~font-awesome/scss/font-awesome.scss”；

使用普通角度2.4+4+

与

在app.module.ts中，修改构造函数以使用

MdIconRegistry

导出类AppModule{
构造函数（matIconRegistry:matIconRegistry）{
matIconRegistry.registerFontClassAlias（'fontawesome'，'fa'）；
}
}

并将

MatIconModule

添加到

@NgModule

导入中

@NgModule({
进口：[
Maticon模块，
....
],
声明：。。。。
}

---

现在在任何模板文件中都可以执行

---

编辑：我正在使用angular ^4.0.0和Electron ^1.4.3

如果您在ElectronJS或类似产品上遇到问题，并且出现了某种404错误，一种可能的解决方法是通过添加（并假设您已通过npm或package.json文件安装了font awesome节点模块）来编辑

webpack.config.js

：

请注意，我使用的webpack配置将

src/app/dist

作为输出，并且在dist中，webpack创建了一个

assets

文件夹：

// our angular app
entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/app/app',
},

// Config for our build files
output: {
    path: helpers.root('src/app/dist'),
    filename: '[name].js',
    sourceMapFilename: '[name].map',
    chunkFilename: '[id].chunk.js'
},

因此，基本上，目前正在发生的是：

• Webpack正在将字体文件夹复制到开发人员资源文件夹
• Webpack正在将dev assets文件夹复制到

  dist

  assets文件夹

现在，当构建过程完成时，应用程序需要查找

.scss

文件和包含图标的文件夹，并正确解析它们。 为了解决这些问题，我在我的网页配置中使用了：

// support for fonts
{
    test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
    loader: 'file-loader?name=dist/[name]-[hash].[ext]'
},

最后，在

.scss

文件中，我导入字体awesome.scss并定义字体路径，也就是

dist/a
body {
  font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}

ng add @fortawesome/angular-fontawesome

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
@NgModule({
  imports: [
    BrowserModule,
    FontAwesomeModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  faCoffee = faCoffee;
}

<fa-icon [icon]="faCoffee"></fa-icon>

npm install --save font-awesome angular-font-awesome

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

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

<fa name="cog" animation="spin"></fa>

// in .angular-cli.json

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

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';

<h1>
  {{title}} <i class="fa fa-check"></i>
</h1>

{
 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
                    loader: "file-loader"
}

@import "https://use.fontawesome.com/releases/v5.0.7/css/all.css";

npm install @fortawesome/fontawesome-free-webfonts

"app": {
....
"styles": [
....
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css"
],
...    
}

npm install @fortawesome/angular-fontawesome

npm install @fortawesome/fontawesome-free

npm install font-awesome --save

$fa-font-path: "~font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome.scss";
<mat-icon fontSet="fontawesome" fontIcon="fa-android"></mat-icon>

npm install --save-dev @fortawesome/fontawesome-free

$fa-font-path: "../node_modules/@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/v4-shims";

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

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

ng new navaApp
cd navaApp

npm install --save font-awesome

// in angular.json
"build": {
"options": {
"styles": [
  "../node_modules/font-awesome/css/font-awesome.css",
  "src/styles.css"
],
 }
}

ng new cli-app --style=scss

// in angular.json
"build": {
"options": {
"styles": [
  "src/styles.scss"
],
}
}

$fa-font-path : '../node_modules/font-awesome/fonts';

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

ng add @fortawesome/angular-fontawesome@0.6.x

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

ng add @fortawesome/angular-fontawesome

OR using yarn

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/angular-fontawesome

OR Using NPM

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

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

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

  imports: [
    BrowserModule,
    FontAwesomeModule
  ],

turningGearIcon = faCogs;

<fa-icon [icon]="turningGearIcon"></fa-icon>

npm install --save @fortawesome/fontawesome-free

"styles": [
          "src/styles.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js",
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/@fortawesome/fontawesome-free/js/all.js"
        ]