当前位置 : 主页 > 网页制作 > Bootstarp >

在webpack开发中利用bootstrap4中的字体图标

来源:互联网 收集:自由互联 发布时间:2021-06-12
在webpack项目开发中,难免会需要一些图标,如果用到bootstrap4的话,就会碰到一些问,因为bootstrap 4.x版本把icon分离出来作为一个单独的项目open-iconic,所以cnpm i bootstrap -S是还不够的。还

  在webpack项目开发中,难免会需要一些图标,如果用到bootstrap4的话,就会碰到一些问,因为bootstrap 4.x版本把icon分离出来作为一个单独的项目open-iconic,所以cnpm i bootstrap -S是还不够的。还需要在安装open-iconic项目。

1. 下载安装:cnpm i bootstrap -S   

  如果是4以上的版本,还需要安装 cnpm i https://github.com/iconic/open-iconic.git -D

2. 在main.js引入(这个主文件看个人,有的是index.js)

1 import ‘bootstrap/dist/css/bootstrap.css‘
2 import ‘open-iconic/font/css/open-iconic-bootstrap.css‘

3.在webpack.config.js中配置

1 {test:/\.(ttf|eot|svg|woff|woff2|otf)$/, use: ‘url-loader‘}

4.在index.html中

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

效果:

分享图片

更多图标地址:https://useiconic.com/open#icons

网友评论