如何为 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.所以你这样做:
npm install font-awesome --save
在
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"
.在任何你想要的 html 文件中放置一些字体很棒的图标:
<i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"></i>
停止应用程序 Ctrl + c 然后使用
ng serve
重新运行应用程序,因为观察者仅用于 src未观察到文件夹和 angular-cli.json 的变化.- 享受您的精美图标!
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:
npm install font-awesome --save
In the
angular-cli.json
file locate thestyles[]
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"
.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>
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.- Enjoy your awesome icons!
这篇关于如何为 Angular 2 + CLI 项目添加 font-awesome的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!