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

添加＆＃34; ../ node_modules / open-iconic / font / css / open-iconic-bootstrap.min.css＆＃34; ＃34;样式＆＃34; .angular-cli.json文件中的选项。

Answer 2

如果有人要解决此问题，并且上述解决方案对他来说无法正常工作，并且在styles.scss中尝试使用scss include时出现错误：

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";

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

2 个答案: