WebPack引用Bootstrap 无法使用图标的结局方案
npm i https://github.com/iconic/open-iconic.git -D 因为boostrap的css里删除了图标 分开了 我们在引入个呵呵。
下载:npm i bootstrap@4.1.3 -D
由于4.x版本icon文件分离出去所以还需要下载open-iconic:
npm i https://github.com/iconic/open-iconic.git -D(下载可能有点慢,要花个几分钟,可用cnpm下载)
在index.js中引入
import 'bootstrap/dist/css/bootstrap.css'
import 'open-iconic/font/css/open-iconic-bootstrap.css'
在webpack.config.js中配置
在html中引用
<span class="oi oi-account-login"></span>
<span class="oi oi-account-logout"></span>
WebPack引用Bootstrap 无法使用图标的结局方案的更多相关文章
- webpack 引用 jquery + bootstrap 报错解决
webpack 引用 jquery + bootstrap , error : jQuery is not defind 在webpack.dev.conf.js plugins[] 加入 new w ...
- JS组件系列——不容错过的两款Bootstrap Icon图标选择组件
前言:最近好多朋友在群里面聊到bootstrap icon图标的问题,比如最常见的菜单管理,每个菜单肯定需要一个对应的菜单图标,要是有一个可视化的图标选择组件就好了,最好是直接选择图标,就能得到对应的 ...
- bootstrap的图标无法正常显示解决方法
bootstrap的图标无法在火狐浏览器上正常显示,出现的是乱码,如下图所示: 解决方案: 直接把bootstrap整个文件夹放到项目中,引用的时候../static/bootstrap-3.3.5- ...
- 解决本地Bootstrap字体图标不可见的问题
原文:https://www.jianshu.com/p/70ac459d33e7 作为Bootstrap的初学者,我最近遇到了一个问题:在使用Bootstrap字体图标时,图标不可见.使用代码如下: ...
- bootstrap字体图标在谷歌显示正常,在火狐显示异常的问题
bootstrap字体图标的使用 现在有很多的网站支持字体图标,我所知道的有bootstrap,fontawesome,iconmoon,等等,可能还有其他我并不知道 bootstrap只要你的文件夹 ...
- bootstrap字体图标
bootstrap字体图标 http://v3.bootcss.com/components/ <!DOCTYPE HTML> <html> <head> < ...
- 联网html引用BootStrap
以下是我写的一个联网html引用BootStrap的例子,可作为参考: <%@ Page Language="C#" AutoEventWireup="true&q ...
- webpack 引入 bootstrap
Bootstrap中是一种事实上的界面标准,标准到现在的网站大量的使用它.如果可以使用webpack引入的bootstrap,就可以一个npm install完成项目的依赖,而不必手工的添加到html ...
- 如何在前端项目中引用bootstrap less?
在基于bootstrap css框架的前端项目开发中,如果有grunt build系统,那么工作流是:客制化less,在less中定义自己的 CSS,同时可以随意引用bootstrap中预定义好的cs ...
随机推荐
- cassandra 在window上的demo
Cassandra window使用 1. 下载:http://cassandra.apache.org/download/. 2. 解压后,bin目录下,cassan ...
- MySQL 在线更改 Schema 工具
MySQL在线更改schema的工具很多,如Percona的pt-online-schema-change. Facebook的 OSC 和 LHM 等,但这些都是基于触发器(Trigger)的,今天 ...
- BZOJ_2529_[Poi2011]Sticks_贪心
BZOJ_2529_[Poi2011]Sticks_贪心 Description Little Johnny was given a birthday present by his grandpare ...
- BZOJ_2460_[BeiJing2011]元素_线性基
BZOJ_2460_[BeiJing2011]元素_线性基 Description 相传,在远古时期,位于西方大陆的 Magic Land 上,人们已经掌握了用魔 法矿石炼制法杖的技术.那时人们就认识 ...
- Solr的中英文分词实现
对于Solr应该不需要过多介绍了,强大的功能也是都体验过了,但是solr一个较大的问题就是分词问题,特别是中英文的混合分词,处理起来非常棘手. 虽然solr自带了支持中文分词的cjk,但是其效果实在不 ...
- 解决非root用户使用docker的办法
通常我们使用Docker的时候都是使用的root,官方说法如下 The docker daemon binds to a Unix socket instead of a TCP port. By d ...
- 浅谈URL跳转与Webview安全
学习信息安全技术的过程中,用开阔的眼光看待安全问题会得到不同的结论. 在一次测试中我用Burpsuite搜索了关键词url找到了某处url,测试一下发现waf拦截了指向外域的请求,于是开始尝试绕过.第 ...
- 从壹开始微服务 [ DDD ] 之终篇 ║当事件溯源 遇上 粉丝活动
回首 哈喽~大家好,时间过的真快,关于DDD领域驱动设计的讲解基本就差不多了,本来想着周四再开一篇,感觉没有太多的内容了,剩下的一个就是验证的问题,就和之前的JWT很类似,就不打开一个章节了,而且这个 ...
- 史上最最靠谱,又双叒叒简单的基于MSXML的XML解析指南-C++
目录 史上最最靠谱,又双叒叒简单的基于MSXML的XML解析指南 流程设计 xml信息有哪几种读取形式(xml文件或wchar) 如何选取节点,and取节点属性有哪些方法? IXMLDOMNode与I ...
- Java3y文章目录导航
由于写的文章已经是有点多了,为了自己和大家的检索方便,于是我就做了这么一个博客导航. 想要获取最新原创的技术文章欢迎关注我的公众号:Java3y 文章目录导航:https://github.com/Z ...