angular2 – 如何添加字体awesome到Angular 2 CLI项目

前端之家收集整理的这篇文章主要介绍了angular2 – 如何添加字体awesome到Angular 2 CLI项目前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用Angular 2(最终版)和Angular CLI。

如何向我的项目添加字体awesome?

在Angular 2.0最终发布之后,Angular2 CLI项目的结构已经改变 – 你没有任何供应商文件,没有system.js – 只有webpack。所以你做:

> npm install font-awesome –save
>在angular-cli.json文件中找到styles []数组和addons []数组,然后向它们添加font-awesome引用,如下所示:

"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!?
             ],...
         }
       ],"addons": [
    "../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)" // - here
],

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

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

>运行构建和再次服务 – 因为监视器仅用于src文件夹,而angular-cli.json没有遵守更改。>享受你真棒的图标!

原文链接:https://www.f2er.com/angularjs/145450.html

猜你在找的Angularjs相关文章