如何为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 buildng 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错误问题的唯一方法