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

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

如何添加字体真棒到我的项目？

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

  1. npm install font-awesome --save

  2. 在angular-cli.json文件中findstyles[]数组，并在这里添加font-awesome引用目录，如下所示： 

      “应用”： [
           {
              “root”：“src”，
              “outDir”：“dist”，
              ....
              “风格”：[
                 “styles.css的”，
                 “../node_modules/bootstrap/dist/css/bootstrap.css”
                 “../node_modules/font-awesome/css/font-awesome.css”//这里的webpack会自动build立一个链接的CSS元素！
              ]
              ...
          }
        ]

 ]

  3. 在你想要的任何html文件中放置一些字体超棒的图标： 

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

  4. 运行ng build和ng serve – 因为观察者只是为了src文件夹和angular-cli.json没有被观察到的变化。

  5. 享受你的真棒图标！

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

最好的答案是有点过时了，有一个稍微简单的方法。

  1. 通过npm安装

    npm install font-awesome --save

  2. 在你的style.css ：

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

    或在你的style.scss ：

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

使用~会让node_module看起来node_module 。 这样做比用相对path更好。 原因是，如果你在npm上传一个组件，并且在组件scss里面导入了font-awesome，那么它将正确地用〜来工作，而不是在那个时候会出错的相对path。

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

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

  1. 安装
  2. 造型（CSS / SCSS）
  3. 在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度材料

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

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

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

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

}

现在在任何模板文件，你现在可以做 

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

有了Angular2 RC5和angular-cli 1.0.0-beta.11-webpack.8你可以用css导入来实现这一点。

只需安装字体真棒： 

 npm install font-awesome --save

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

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

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

有一个正式的故事，现在https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/include-font-awesome.md

安装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

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

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

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

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

testing

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

要validationFont Awesome已经正确设置，请将src / app / app.component.html更改为以下内容… 

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

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

另外还有一个相关的问题Angular CLI输出字体真棒的字体文件的dist根默认angular度cli输出字体在dist根，这是不是一个问题的方式。

从https://github.com/AngularClass/angular-starter开始，在testing了很多不同的configuration组合后，下面是我为了使它与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]' }

这里有很多好的答案。 但是，如果你尝试了所有这些，仍然得到正方形而不是令人敬畏的图标，请检查您的CSS规则。 在我的情况下，我有以下规则： 

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

它覆盖了丰富的字体。 只是将*select器replace为body解决了我的问题： 

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

经过一番实验后，我设法做了以下工作：

  1. 用npm安装： 

     npm install font-awesome --save

  2. 添加到angular-cli-build.js文件中： 

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

  3. 添加到index.html 

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

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

。+（CSS | css.map | OTF | EOT | SVG | TTF | WOFF | woff2）

使用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]' },

装载机是在那里解决这种types的webpack错误 

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

和正则expression式匹配这些svg引用（有或没有版本规范）。 根据你的webpack设置你可能不需要它，或者你可能需要别的东西。

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

如果你有ElectronJS或类似的问题，并且有一个404错误，一个可能的解决方法是通过添加（通过假设你已经通过npm安装的字体真棒节点模块，或在你的webpack.config.js中） package.json文件）： 

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

请注意，我使用的webpackconfiguration具有src/app/dist作为输出，并且在dist中，由webpack创buildassets文件夹： 

 // 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正在将字体文件夹复制到dev资源文件夹。
  • Webpack正在将开发资产文件夹复制到dist资源文件夹

现在，当构build过程完成时，应用程序将需要查找.scss文件和包含图标的文件夹，并正确parsing它们。 为了解决这些问题，我已经在我的webpackconfiguration中使用了这个： 

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

最后，在.scss文件中，我导入了font-awesome .scss并定义了字体的path，这也是dist/assets/font-awesome/fonts 。 path是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";

请注意，通过这种方式，它将定义字体path（稍后在.scss文件中使用），并使用node_modules -awesome导入.scss文件来parsingnode_modules的字体真棒path。

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

Interesting Posts

我可以在Angular 2中将事件从父母发送给孩子吗？

如何使圆angular的ImageView？

Angular2 canActivate（）调用asynchronous函数

Angular 2组件构造函数与OnInit

Angular 2的被动链接 – <a href="">等价

ngSubmit以Angular 2forms刷新页面

使用Angular 2

从Angular 2服务创build和返回Observable

找不到模块'angular2 / core'

使用rxjs处理刷新令牌