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

发布时间：2020-12-17 08:32:21 所属栏目：安全来源：网络整理

导读：我使用Angular 2(最终版)和Angular CLI。如何向我的项目添加字体awesome？在Angular 2.0最终发布之后，Angular2 CLI项目的结构已经改变 – 你没有任何供应商文件，没有system.js – 只有webpack。所以你做： npm install font-awesome –save 在angular-cl

我使用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没有遵守更改。>享受你真棒的图标！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!