这篇文章描述了如何将Fontawesome 5集成到Angular 6中(Angular 5和以前的版本也可以工作，但你必须调整我的文章)

选项1:添加css-Files

利:每个图标都将包括在内

Contra:每个图标将包括(更大的应用程序大小，因为所有字体都包括在内)

添加以下包:

npm install @fortawesome/fontawesome-free-webfonts

然后在angular.json中添加以下代码行:

"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"
],
...    
}

选项2:Angular包

优点:应用程序更小

反:你必须单独包含你想要使用的每个图标

使用FontAwesome 5 Angular包:

npm install @fortawesome/angular-fontawesome

只需按照他们的文档添加图标。他们使用svgs -icons，所以你只需要添加svgs / icons就可以了。

在Angular 11中

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

然后在app。module。ts的imports array中

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

  imports: [
    BrowserModule,
    FontAwesomeModule
  ],

然后在any.component.ts中

turningGearIcon = faCogs;

然后是any.component。html

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

我想我会抛出我的决议，因为字体awesome现在安装不同，根据他们的文档。

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

为什么它是fortawesome现在我不知道了，但我想我会坚持使用最新的版本，而不是回到旧的字体-真棒。

然后我把它导入我的scss

$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";

希望这能有所帮助

经过一些实验，我设法得到以下工作:

使用npm安装: NPM install font-awesome——保存 添加到angular-cli-build.js文件: vendorNpmFiles: [ font-awesome / * * / *。+ (css | css.map |传递|测试结束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）

这篇文章描述了如何将Fontawesome 5集成到Angular 6中(Angular 5和以前的版本也可以工作，但你必须调整我的文章)

选项1:添加css-Files

利:每个图标都将包括在内

Contra:每个图标将包括(更大的应用程序大小，因为所有字体都包括在内)

添加以下包:

npm install @fortawesome/fontawesome-free-webfonts

然后在angular.json中添加以下代码行:

"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"
],
...    
}

选项2:Angular包

优点:应用程序更小

反:你必须单独包含你想要使用的每个图标

使用FontAwesome 5 Angular包:

npm install @fortawesome/angular-fontawesome

只需按照他们的文档添加图标。他们使用svgs -icons，所以你只需要添加svgs / icons就可以了。

编辑:我使用角^4.0.0和电子^1.4.3

如果你在使用ElectronJS或类似的程序时遇到了问题，并且出现了404错误，一个可能的解决方法是重新编辑你的webpack.config.js，通过添加(并且假设你已经通过npm或包中安装了字体很棒的节点模块)。json文件):

new CopyWebpackPlugin([
     { from: 'node_modules/font-awesome/fonts', to: 'assets' },
     { from: 'src/assets', to: 'assets' }
]),

注意，我使用的webpack配置有src/app/dist作为输出，并且，在dist中，webpack创建了一个资产文件夹:

// 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文件和包含图标的文件夹，正确地解析它们。 为了解决这些问题，我在我的webpack配置中使用了这个:

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

最后，在.scss文件中，我导入了字体很棒的.scss，并定义了字体的路径，同样是dist/assets/font-awesome/fonts。路径是dist，因为在我的webpack中。配置输出。路径设置为helpers.root('src/app/dist');

在app。scss中

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

注意，通过这种方式，它将定义字体路径(稍后在.scss文件中使用)，并使用~font-awesome导入.scss文件来解析node_modules中的字体-awesome路径。

这是相当棘手的，但这是唯一的方法，我发现绕过404错误问题与电子。js