在webpack开发中利用bootstrap4中的字体图标
在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
在webpack开发中利用bootstrap4中的字体图标的更多相关文章
- 在WPF中使用FontAwesome之类的字体图标
我之前在博客中介绍过几个矢量图库网站,在WPF程序中,一般接触到的矢量图标资源有XAML.SVG.字体这三种格式.XAML是标准格式就不说了,SVG并不是直接支持的,不过微软提供了Expression ...
- webpack热更新问题和antd design字体图标库扩展
标题也不知道怎么写好,真是尴尬.不过话说回来,距离上一次写文快两个月了,最近有点忙,一直在开发新项目, 今天刚刚闲下来,项目准备提测.借这个功夫写点东西,把新项目上学到的一些好的干活分享一下,以便之后 ...
- iOS中利用 runtime 一键改变字体
1.准备 我们新建一个项目名叫ChangeFont,然后我就随便找了个名叫loveway.ttf的字体库拖进去,里面的工程目录大概就是这样的 目录 现在我们就简单的直接在storyboard上拖了一个 ...
- Web网站中利用JavaScript中ActiveXObject对象获取硬件信息(显示器数量、分辨率)从而进行单双屏跳转
前言:最近这两天工作上,要实现一个功能,在好友阿聪的帮助下,算是比较好的解决了这个需求. B/S的Web网站,需要实现点击按钮时,根据客户端连接的显示屏(监视器)数量进行,单双屏跳转显示新页面. 由于 ...
- 解决bootstrap中显示不了本地字体图标
正在用bootstrap写一个登录界面时,准备用一个图标 但实际效果是: 可以看到图标并没有显示出来,百度一下,发现有可能是路径问题. 自己的目录关系和引用方式如下分别为: Ctrl+左键进入glyp ...
- bootstrap4中bootstrap_treeview不显示图标原因以及解决办法
1.bootstrap4中bootstrap_treeview不显示图标原因 查看过大神的博客,经过自己试验,插件依赖: bootstrap/3.3.7 jquery/3.3.1 <link h ...
- vue中引入字体图标报错,找不到字体文件
在用vue + webpack进行开发的时候,在引用字体图标遇到字体无法加载的问题: 报以下错误 搞了好久没搞定,最后才找到解决方法(还是没有找到原因) 修改字体图标的css中引入字体文件的路径 以前 ...
- 从0构建webpack开发环境(一) 一个简单webpack.config.js
本文基于webpack4.X,使用的包管理工具是yarn 概念相关就不搬运了,直接开始 首先项目初始化 mkdir webpack-demo && cd webpack-demo ya ...
- 扩展layui中的自带字体图标
项目中,虽然layui的字体图标库中已经有了1000多个图标了,但是也有时候不能满足我们自定义图标的需求,所以需要进行自定义,具体步骤如下: 1.在iconfont上找到自己喜欢的图标,也可以上传ui ...
随机推荐
- 2017《Java技术》预备作业 计科1502任秀兴
阅读邹欣老师的博客,谈谈你期望的师生关系是什么样的? 我认为,学生和老师的关系,应该亦师亦友.可以以一种朋友的身份去进行教学,是我们理想中的课堂. 在生活中,老师和我们应该多沟通,成为朋友,在有感情的 ...
- poi 处理空单元格
http://poi.apache.org/spreadsheet/quick-guide.html 用google翻译 找到
- PAT(A) 1042. Shuffling Machine (20)
Shuffling is a procedure used to randomize a deck of playing cards. Because standard shuffling techn ...
- 【WPF】一些拖拽实现方法的总结(Window,UserControl)
原文:[WPF]一些拖拽实现方法的总结(Window,UserControl) 原文地址 https://www.cnblogs.com/younShieh/p/10811456.html 前文 本文 ...
- Centos 文件权限修改
1.查看权限 # ls -l dirPath 2.修改权限,root权限执行(-R 子目录的权限都会改变) # chmod -R dirPath
- 4、服务注册&服务提供者
1.什么是服务提供者 服务提供者(Service Provider):是指服务的被调用方(即:为其它服务提供服务的服务):服务提供者,作为一个Eureka Client,向Eureka Server做 ...
- 【CSS3】rgba与opacity
RGBA 语法 R:红色值.正整数 | 百分数 G:绿色值.正整数 | 百分数 B:蓝色值.正整数| 百分数 A:透明度.取值0~1之间 为什么要用RGBA而不用opacity 因为在项目中需要用到一 ...
- springMVC+freemarker整合
转自:http://angelbill3.iteye.com/blog/1980904 在springMVC的项目中,加入freemarker 1.首先导入springMVC-webmvc所需的JAR ...
- 正规式α向有限自动机M的转换
[注:这一节是在学习东南大学廖力老师的公开课时,所记录的一些知识点截屏,谢谢廖力老师的辛劳付出] 引入3条正规式分裂规则来分裂α,所得到的是NFA M(因为包含ε弧,之后进行确定化就是所需要求得DF ...
- Zookeeper用作注册中心的原理
RPC框架中有3个重要的角色: 注册中心 :保存所有服务的名字,服务提供者的ip列表,服务消费者的IP列表: 服务提供者: 提供跨进程服务: 服务消费者: 寻找到指定命名的服务并消费. 一:Zooke ...