如何添加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";