如何向 Angular 2 + CLI 项目添加 font-awesome [英] How to add font-awesome to Angular 2 + CLI project

问题描述

我使用的是 Angular 2+ 和 Angular CLI.

如何将 font-awesome 添加到我的项目中?

解决方案

在 Angular 2.0 最终发布之后，Angular2 CLI 项目的结构发生了变化 — 你不需要任何供应商文件，没有 system.js — 只有 webpack.所以你这样做:

1. npm install font-awesome --save

2. 在 angular-cli.json 文件中找到 styles[] 数组并在此处添加 font-awesome 引用目录，如下所示:

   应用程序":[{"root": "src","outDir": "dist",....风格":["styles.css","../node_modules/bootstrap/dist/css/bootstrap.css","../node_modules/font-awesome/css/font-awesome.css"//- 这里 webpack 会自动构建一个链接 css 元素！?],...}]],

   <块引用>

   在较新版本的 Angular 中，使用 angular.json 文件代替，不要使用 ../.例如，使用 "node_modules/font-awesome/css/font-awesome.css".

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

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

4. 停止应用程序 Ctrl + c 然后使用 ng serve 重新运行应用程序，因为观察者仅用于 src未观察到文件夹和 angular-cli.json 的变化.

5. 享受您的精美图标！

I'm using Angular 2+ and Angular CLI.

How do I add font-awesome to my project?

解决方案

After Angular 2.0 final release, the structure of the Angular2 CLI project has been changed — you don't need any vendor files, no system.js — only webpack. So you do:

1. npm install font-awesome --save

2. In the angular-cli.json file locate the styles[] array and add font-awesome references directory here, like below:

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

   In more recent versions of Angular, use the angular.json file instead, without the ../. For example, use "node_modules/font-awesome/css/font-awesome.css".

3. Place some font-awesome icons in any html file you want:

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

4. Stop the application Ctrl + c then re-run the app using ng serve because the watchers are only for the src folder and angular-cli.json is not observed for changes.

5. Enjoy your awesome icons!

这篇关于如何向 Angular 2 + CLI 项目添加 font-awesome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！