在webpack开发中利用bootstrap4中的字体图标
发布时间:2020-12-17 21:31:56 所属栏目:安全 来源:网络整理
导读:在webpack项目开发中,难免会需要一些图标,如果用到bootstrap4的话,就会碰到一些问,因为bootstrap 4.x版本把icon分离出来作为一个单独的项目open-iconic,所以cnpm i bootstrap -S是还不够的。还需要在安装open-iconic项目。 1. 下载安装:cnpm i bootstr
在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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
热点阅读