因爲4.X版本Boostrap把icon分離出來作爲一個單獨的項目open-iconic,所以單純的只引入Boostrap項目是不夠的,還需要下載open-iconic項目(Git:https://github.com/iconic/open-iconic)
以下介紹webpack的使用方法,常用的使用《link》標籤引入的請查看官網:https://useiconic.com/open
- 下載:npm i [email protected] -D
由於4.x版本icon文件分離出去所以還需要下載open-iconic:
npm i https://github.com/iconic/open-iconic.git -D
(下載可能有點慢,要花個幾分鐘,可用cnpm下載) - 在index.js中引入
import 'bootstrap/dist/css/bootstrap.css'
import 'open-iconic/font/css/open-iconic-bootstrap.css'
- 在webpack.config.js中配置
//處理字體文件
{test:/\.(ttf|eot|svg|woff|woff2|otf)$/, use: 'url-loader'}
- 在html中引用
<span class="oi oi-account-login"></span>
<span class="oi oi-account-logout"></span>
注:可在上邊的網站中找到使用方法,如圖,由於導入的Bootstrap Font的CSS文件所以只有第四種方式是可用的,每一種方式引用的文件不一樣,請配套使用