在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)

 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.在index.html中

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

效果:

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

最新文章

  1. Z字形扫描(201412-2)
  2. 【8-30】oracle数据库学习
  3. Spring MVC入门实战(一)
  4. Web程序员开发App系列 - 开发我的第一个App,源码下载
  5. TCP/IP简介
  6. Removing Columns 分类: 贪心 CF 2015-08-08 16:10 10人阅读 评论(0) 收藏
  7. 【转】JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
  8. linux 脚本编写基础(一)
  9. 【linux】具体芯片MACHINE_START处理
  10. 微信小程序开发之picker
  11. 你不需要 jQuery,但你需要一个 DOM 库
  12. Android中将一个图片切割成多个图片
  13. 【BZOJ1023】仙人掌图(仙人掌,动态规划)
  14. Android Studio提示 Connection reset
  15. JS中实现种子随机数
  16. CSS常用伪类
  17. WINDOWS SERVER 2016 设置使用照片查看器查看图片
  18. APP打包提交审核的步骤
  19. bzoj 1814 Ural 1519 Formula 1 ——插头DP
  20. SQL Server数据库有三种恢复模式:简单恢复模式、完整恢复模式和大容量日志恢复模式

热门文章

  1. client-go获取k8s集群内部连接,实现deployment的增删改查
  2. UCML 原生Android中嵌入Cordova Webview
  3. Java中Iterator用法整理
  4. dcoker镜像的分层
  5. apache虚拟主机配置及解析
  6. go 区分指针
  7. CG-CTF CRYPTO部分wp
  8. LeetCode Array Easy 119. Pascal&#39;s Triangle II
  9. C#5.0 异步编程 Async和Await--理解异步方法与线程之间的关系
  10. tcpdump - 转储网络上的数据流