在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中的字体图标的更多相关文章

  1. 在WPF中使用FontAwesome之类的字体图标

    我之前在博客中介绍过几个矢量图库网站,在WPF程序中,一般接触到的矢量图标资源有XAML.SVG.字体这三种格式.XAML是标准格式就不说了,SVG并不是直接支持的,不过微软提供了Expression ...

  2. webpack热更新问题和antd design字体图标库扩展

    标题也不知道怎么写好,真是尴尬.不过话说回来,距离上一次写文快两个月了,最近有点忙,一直在开发新项目, 今天刚刚闲下来,项目准备提测.借这个功夫写点东西,把新项目上学到的一些好的干活分享一下,以便之后 ...

  3. iOS中利用 runtime 一键改变字体

    1.准备 我们新建一个项目名叫ChangeFont,然后我就随便找了个名叫loveway.ttf的字体库拖进去,里面的工程目录大概就是这样的 目录 现在我们就简单的直接在storyboard上拖了一个 ...

  4. Web网站中利用JavaScript中ActiveXObject对象获取硬件信息(显示器数量、分辨率)从而进行单双屏跳转

    前言:最近这两天工作上,要实现一个功能,在好友阿聪的帮助下,算是比较好的解决了这个需求. B/S的Web网站,需要实现点击按钮时,根据客户端连接的显示屏(监视器)数量进行,单双屏跳转显示新页面. 由于 ...

  5. 解决bootstrap中显示不了本地字体图标

    正在用bootstrap写一个登录界面时,准备用一个图标 但实际效果是: 可以看到图标并没有显示出来,百度一下,发现有可能是路径问题. 自己的目录关系和引用方式如下分别为: Ctrl+左键进入glyp ...

  6. bootstrap4中bootstrap_treeview不显示图标原因以及解决办法

    1.bootstrap4中bootstrap_treeview不显示图标原因 查看过大神的博客,经过自己试验,插件依赖: bootstrap/3.3.7 jquery/3.3.1 <link h ...

  7. vue中引入字体图标报错,找不到字体文件

    在用vue + webpack进行开发的时候,在引用字体图标遇到字体无法加载的问题: 报以下错误 搞了好久没搞定,最后才找到解决方法(还是没有找到原因) 修改字体图标的css中引入字体文件的路径 以前 ...

  8. 从0构建webpack开发环境(一) 一个简单webpack.config.js

    本文基于webpack4.X,使用的包管理工具是yarn 概念相关就不搬运了,直接开始 首先项目初始化 mkdir webpack-demo && cd webpack-demo ya ...

  9. 扩展layui中的自带字体图标

    项目中,虽然layui的字体图标库中已经有了1000多个图标了,但是也有时候不能满足我们自定义图标的需求,所以需要进行自定义,具体步骤如下: 1.在iconfont上找到自己喜欢的图标,也可以上传ui ...

随机推荐

  1. centos 7 下升级自带 sqlite3

    问题 在 centos 7 上面运行 django 2.2 开发服务器时出现: django.core.exceptions.ImproperlyConfigured: SQLite 3.8.3 or ...

  2. ivew Table 固定列设置后,底部拖拽的横轴被覆盖拉不动

    原因:设置了max-height=500px:表格最大高度,单位 px,设置后,如果表格内容大于此值,会固定表头.去掉即可.

  3. Tomcat负载均衡、调优核心应用进阶学习笔记(三):LNMT nginx+tomcat、LAMT apache+tomcat、session会话保持、不错的站点

    文章目录 LNMT nginx+tomcat LAMT apache+tomcat 基于mod_proxy 单节点 配置基于mod_proxy的负载均衡 基于mod_jk(需要编译安装) 单节点 配置 ...

  4. new运算符工作原理(new运算符的伪码实现)

    // 只要函数创建,就有一个prototype属性// 构造函数和普通函数的区别就是调用的时候又没有用 new function Fn() { // this 就是实例化后的对象 三段式 var th ...

  5. MySql常见的错误

    一些MySql运行中遇到的错误总结,大家也可以留言进行我进行汇总. 一.Unknown error 1146 com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxEr ...

  6. 使用allure2生成精美报告

    安装:brew install allure pip install allure-pytest 在测试执行期间收集结果 pytest -s –q --alluredir=./result/ 测试完成 ...

  7. v-slot vue2.6新增指令使用指南

    子组件 <template> <div class="wrapper"> <slot name="demo" :msg=" ...

  8. 后端大佬给我配置的deploy serves文件以便学习

    serves apiVersion: v1 kind: Service metadata: labels: com.wise2c.service: ui-ll-2 com.wise2c.stack: ...

  9. JS基础API

    数据类型 number object string null undefined boolean 转换规则是除了undefined null false 0 NAN ''或""&q ...

  10. KiCAD绘制电源符号

    KiCAD绘制电源符号 KiCAD自带的电源符号有时候不符合我们的操作习惯,需要自己重新定义电源符号,这时候就需要新建(不能更改系统自带库的电源符号) 1.新建符号,参照下图行设置 2.放置引脚和图形 ...