Optoin 2：

Question

我正在使用Angular 2+和Angular CLI。

如何为我的项目添加font-awesome？

Answer 1

在Angular 2.0最终版本发布之后， Angular2 CLI项目的结构已经改变 - 您不需要任何供应商文件，也不需要system.js - 只需要webpack。所以你这样做：

npm install font-awesome --save

在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!?
             ],
             ...
         }
       ]

],

在您想要的任何html文件中放置一些字体真棒图标：

 <i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i>

停止应用程序 Ctrl + c 然后使用ng serve重新运行应用程序，因为观察者仅用于src文件夹和角度 - 没有观察到cli.json的变化。
享受你真棒图标！

Answer 2

如果您使用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基础架构。 ;）

Answer 3

最佳答案有点过时了，方法稍微容易一些。

通过npm安装

npm install font-awesome --save
在style.css：
中
@import '~font-awesome/css/font-awesome.css';

或在style.scss：

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

修改，如评论中所述，字体行必须在较新版本上更改为$fa-font-path: "../../../node_modules/font-awesome/fonts";

使用~可以查看node_module。这样做比用相对路径做得更好。原因是，如果你在npm上传一个组件，并在组件scss中导入font-awesome，那么它将与〜一起正常工作，而不是在那时会出错的相对路径。

此方法适用于包含css的任何npm模块。它也适用于scss。然而如果你将css导入你的styles.scss它不会工作（反之亦然）。 Here is why

Answer 4

在Angular Projects中使用Font-Awesome有三个部分

安装
样式（CSS / SCSS）
Angular中的用法

<强>安装

从NPM安装并保存到package.json

npm install --save font-awesome

<强>定型 如果使用CSS

插入style.css

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

<强>定型 如果使用SCSS

插入style.scss

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

使用普通的Angular 2.4 + 4 +

<i class="fa fa-area-chart"></i>

使用Angular Material

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

export class AppModule {
  constructor(matIconRegistry: MatIconRegistry) {
    matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
  }
}

并将MatIconModule添加到您的@NgModule导入

@NgModule({
  imports: [
    MatIconModule,
    ....
  ],
  declarations: ....

}

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

<mat-icon fontSet="fontawesome" fontIcon="fa-area-chart"></mat-icon>

Answer 5

使用Angular2 RC5和angular-cli 1.0.0-beta.11-webpack.8，您可以通过css导入实现此目的。

只需安装字体真棒：

npm install font-awesome --save

然后在您配置的一个样式文件中导入font-awesome：

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

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

Answer 6

可接受的答案已过时。

对于Angle 9和Fontawesome 5

安装FontAwesome

npm install @ fortawesome / fontawesome-free --save
在样式下将其注册到angular.json

“ node_modules/@fortawesome/fontawesome-free/css/all.min.css”
在您的应用程序上使用

Answer 7

选项1：

您可以使用angular-font-awesome npm模块

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添加到angular-cli.json中的样式

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

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

使用示例：

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

Optoin 2：

现在有official story

安装font-awesome库并将依赖项添加到package.json

npm install --save font-awesome

使用CSS

将Font Awesome CSS图标添加到您的应用中......

// in .angular-cli.json

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

使用SASS

在_variables.scss中创建一个空文件src/。

将以下内容添加到_variables.scss：

$fa-font-path : '../node_modules/font-awesome/fonts'; 在styles.scss中添加以下内容：

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

<强>测试

运行服务以在开发模式下运行您的应用程序，并导航到http://localhost:4200。

要验证Font Awesome设置是否正确，请将src / app / app.component.html更改为以下内容...

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

保存此文件后，返回浏览器以查看应用标题旁边的Font Awesome图标。

还有一个相关问题Angular CLI outputs the font-awesome font files the dist root，因为默认情况下，角度cli会将字体输出到dist根目录，这根本不是问题。

Answer 8

对于Fontawesome 5.x +，最简单的方法如下：

使用npm软件包安装： npm install --save @fortawesome/fontawesome-free

在您的styles.scss文件中，包括：

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

注意：如果您有_variables.scss文件，则更合适的是将$fa-font-path包含在其中，而不要包含在styles.scss文件中。

Answer 9

我想对此做出解决，因为font-awesome现在根据其文档安装的方式有所不同。

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

为什么它如此令人赞叹，现在让我无所适从，但我认为我会坚持使用最新版本，而不是退回到旧的字体真棒。

然后将其导入到我的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";

希望这会有所帮助

Answer 10

Font Awesome为您提供了scalable个矢量图标，这些图标可以立即进行自定义-大小，颜色，阴影以及可以用CSS进行的所有操作。

创建一个新项目并导航到该项目。

ng new navaApp
cd navaApp

安装真棒字体库并将依赖项添加到package.json。

npm install --save font-awesome

使用CSS

要将Font Awesome CSS图标添加到您的应用中...

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

使用SASS

使用SASS创建新项目：

ng new cli-app --style=scss

要与带有CSS的现有项目一起使用：

将src/styles.css重命名为src/styles.scss 更改angular.json以查找styles.scss而不是css：

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

请确保将styles.css更改为styles.scss。

在_variables.scss中创建一个空文件src/。

将以下内容添加到_variables.scss：

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

在styles.scss中添加以下内容：

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

Answer 11

经过一些实验，我成功完成了以下工作：

使用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）

Answer 12

这篇文章描述了如何将 Fontawesome 5 整合到 Angular 6 （Angular 5和以前的版本也可以，但是你必须调整我的作品）

选项1：添加css-Files

Pro：将包含每个图标

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包

专业版：较小的应用尺寸

Contra：你必须包括你想要单独使用的每个图标

使用FontAwesome 5 Angular包：

npm install @fortawesome/angular-fontawesome

只需按照他们的文档添加图标即可。他们使用svg-icons，所以你只需添加你真正使用的svgs / icons。

Answer 13

要在Angular项目中使用Font Awesome 5，请将下面的代码插入src / index.html文件中。

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

祝你好运！

Answer 14

以上工作中有许多说明，建议您仔细阅读。但是，要注意一点：

安装后在我的项目（仅一个星期大的新练习项目）中使用<i class="fas fa-coffee"></i> 不起作用，并且过去的示例图标也在过去从Font Awesome复制到剪贴板中周。

这<i class="fa fa-coffee"></i> 有效。如果在您的项目上安装了Font Awesome之后仍无法正常工作，建议您检查图标上的类以删除“ s”以查看其是否正常工作。

Answer 15

这里有很多好的答案。但是如果你尝试了所有这些并且仍然得到正方形而不是fontawesome图标，请检查你的css规则。就我而言，我有以下规则：

* {
  font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}

它覆盖了fontawesome字体。只需将*选择器替换为body即可解决我的问题：

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

Answer 16

从https://github.com/AngularClass/angular-starter开始，在测试了很多不同的配置组合之后，我就是为了让它与AoT一起工作而做的。

正如我已多次说过的那样，在app.component.scss：

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

然后在webpack.config.js中（实际上是初学者包中的webpack.commong.js）：

在插件部分：

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

在规则部分：

,
{
    test: /\.(eot|woff2?|svg|ttf)([\?]?.*)$/,
    use: 'file-loader?name=/assets/fonts/[name].[ext]'
}

Answer 17

对于使用ng的Angular 9：

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

Look Here For More Information

Answer 18

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

如果您遇到 ElectronJS 等问题并且有404错误，可能的解决方法是通过添加（并假设您拥有字体）来改编您的webpack.config.js -awesome节点模块通过npm或package.json文件安装）：

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

请注意，我使用的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正在将fonts文件夹复制到dev assets文件夹。
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文件中，我导入了font-awesome .scss并定义了字体的路径，这又是dist/assets/font-awesome/fonts。路径为dist，因为在我的webpack.config中，output.path设置为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中的字体真棒路径

这非常棘手，但这是我发现使用Electron.js解决404错误问题的唯一方法

Answer 19

现在有几种方法可以在Angular CLI上安装fontAwesome：

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

此处参考：https://github.com/FortAwesome/angular-fontawesome

Answer 20

在 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 处导入数组

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

  imports: [
    BrowserModule,
    FontAwesomeModule
  ],

然后在any.component.ts

turningGearIcon = faCogs;

然后any.component.html

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

Answer 21

如果由于某种原因你无法安装包掷npm。您始终可以编辑index.html并在头部添加字体真棒CSS。然后在项目中使用它。

Answer 22

我花了几个小时试图与AngularCLI 6.0.3和Material Design一起使用最新版本的FontAwesome 5.2.0。我按照FontAwesome网站上的npm安装说明进行操作

他们的最新文档指示您使用以下内容进行安装：

npm install @fortawesome/fontawesome-free

浪费了几个小时后，我终于卸载了它，并使用以下命令安装了真棒字体（这将安装FontAwesome v4.7.0）：

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>

Answer 23

对于webpack2使用：

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

而不是file-loader?name=/assets/fonts/[name].[ext]

Answer 24

您可以使用Angular Font Awesome软件包

npm install-保存字体真棒angular-font-真棒

，然后导入您的模块：

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

并将样式导入angular-cli文件中：

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

在npm库中查看有关该软件包的更多详细信息：

https://www.npmjs.com/package/angular-font-awesome

Answer 25

自2016年以来，NPM上的超棒字体包尚未更新。

我的问题是我使用的图标是在更高版本的font-awesome中添加的。

Answer 26

使用LESS（不是SCSS）和Angular 2.4.0以及标准Webpack（不是Angular CLI，以下方法对我有用：

npm install --save font-awesome

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

@import "~font-awesome/less/font-awesome.less";

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

        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
            loader: 'file?name=graphics/[name].[ext]'
        },

加载器可以修复那种

的webpack错误

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

并且regexp匹配那些svg-references（有或没有版本规范）。根据您的webpack设置，您可能不需要它，或者您可能需要其他东西。

Answer 27

如果你想使用免费版的字体 awesome - bootstrap，使用这个：

npm install --save @fortawesome/fontawesome-free

如果您正在构建 angular 项目，您还需要在 angular.json 中添加这些导入：

"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"
        ]

Answer 28

将其添加到package.json中＆＃34; devDependencies＆＃34; font-awesome：＆＃34;版本号＆＃34;

转到您配置的命令提示符类型npm命令。

如何在Angular 2 + CLI项目中添加font-awesome

28 个答案:

选项1：

Optoin 2：