如何添加open-iconic到angular 2项目

Question

我创建了一个角度项目，我添加了bootstrap但是我注意到新版本的bootstrap（版本4）没有图标库，所以我使用以下命令安装它：

npm install open-iconic

但我不知道如何将它添加到我的项目中，根据网页，我需要添加以下两行：

<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>

所以我尝试在angular-cli.json上添加css的路径但是我的按钮没有显示图标，有人可以帮我这个吗？

提前致谢。

Answer 1

将“../node_modules/open-iconic/font/css/open-iconic-bootstrap.min.css”添加到.angular-cli.json文件中的“styles”选项。

Answer 2

如果有些人会来这个问题，并解决上述不会为他的正常工作，你有错误，当您尝试使用SCSS包括在styles.scss ：

ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js./src/styles.scss) (Emitted value instead of an instance of Error) CssSyntaxError: node_modules\\open-iconic\\font\\css\\open-iconic-bootstrap.scss: Can't resolve '../node_modules/open-iconic/font/css/open-iconic.eot' in 'src'

这是因为open-iconic-bootstrap文件中的相对路径指向$icon-font-path: '../fonts/' !default; 并且sass编译器认为根路径是src/app （角度根路径）

在styles.scss @import语句之前的解决方案覆盖$icon-font-path变量以指向正确的路径：

$icon-font-path: '~open-iconic/font/fonts/';
@import "~open-iconic/font/css/open-iconic-bootstrap.scss";