Bootstrap 4.X版本的圖標顯示不出來問題

因爲4.X版本Boostrap把icon分離出來作爲一個單獨的項目open-iconic，所以單純的只引入Boostrap項目是不夠的，還需要下載open-iconic項目(Git：https://github.com/iconic/open-iconic)

以下介紹webpack的使用方法，常用的使用《link》標籤引入的請查看官網：https://useiconic.com/open

1. 下載：npm i [email protected] -D
   由於4.x版本icon文件分離出去所以還需要下載open-iconic：
   npm i https://github.com/iconic/open-iconic.git -D(下載可能有點慢，要花個幾分鐘，可用cnpm下載)
2. 在index.js中引入

import 'bootstrap/dist/css/bootstrap.css'
import 'open-iconic/font/css/open-iconic-bootstrap.css'

3. 在webpack.config.js中配置

//處理字體文件
{test:/\.(ttf|eot|svg|woff|woff2|otf)$/, use: 'url-loader'}

4. 在html中引用

<span class="oi oi-account-login"></span>
<span class="oi oi-account-logout"></span>

注：可在上邊的網站中找到使用方法，如圖，由於導入的Bootstrap Font的CSS文件所以只有第四種方式是可用的，每一種方式引用的文件不一樣，請配套使用