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 无法使用图标的结局方案的更多相关文章

  1. webpack 引用 jquery + bootstrap 报错解决

    webpack 引用 jquery + bootstrap , error : jQuery is not defind 在webpack.dev.conf.js plugins[] 加入 new w ...

  2. JS组件系列——不容错过的两款Bootstrap Icon图标选择组件

    前言:最近好多朋友在群里面聊到bootstrap icon图标的问题,比如最常见的菜单管理,每个菜单肯定需要一个对应的菜单图标,要是有一个可视化的图标选择组件就好了,最好是直接选择图标,就能得到对应的 ...

  3. bootstrap的图标无法正常显示解决方法

    bootstrap的图标无法在火狐浏览器上正常显示,出现的是乱码,如下图所示: 解决方案: 直接把bootstrap整个文件夹放到项目中,引用的时候../static/bootstrap-3.3.5- ...

  4. 解决本地Bootstrap字体图标不可见的问题

    原文:https://www.jianshu.com/p/70ac459d33e7 作为Bootstrap的初学者,我最近遇到了一个问题:在使用Bootstrap字体图标时,图标不可见.使用代码如下: ...

  5. bootstrap字体图标在谷歌显示正常，在火狐显示异常的问题

    bootstrap字体图标的使用 现在有很多的网站支持字体图标,我所知道的有bootstrap,fontawesome,iconmoon,等等,可能还有其他我并不知道 bootstrap只要你的文件夹 ...

  6. bootstrap字体图标

    bootstrap字体图标 http://v3.bootcss.com/components/ <!DOCTYPE HTML> <html> <head> < ...

  7. 联网html引用BootStrap

    以下是我写的一个联网html引用BootStrap的例子,可作为参考: <%@ Page Language="C#" AutoEventWireup="true&q ...

  8. webpack 引入 bootstrap

    Bootstrap中是一种事实上的界面标准,标准到现在的网站大量的使用它.如果可以使用webpack引入的bootstrap,就可以一个npm install完成项目的依赖,而不必手工的添加到html ...

  9. 如何在前端项目中引用bootstrap less？

    在基于bootstrap css框架的前端项目开发中,如果有grunt build系统,那么工作流是:客制化less,在less中定义自己的 CSS,同时可以随意引用bootstrap中预定义好的cs ...

随机推荐

  1. [TJOI2015] 棋盘

    Description 为了提高智商,ZJY去新世界旅游了.可是旅游过后的ZJY杯具的发现要打开通往原来世界的门,必须要解开门上面画的谜题.谜题是这样的:有个\(n\)行\(m\)列的棋盘,棋盘上可以 ...

  2. 树莓派.安装Firefox浏览器

    sudo apt-get install firefox-esr 要做全屏效果的话, 可以加装插件FF Fullscreen 插件地址: https://addons.mozilla.org/en-U ...

  3. MVC项目中怎么浏览html页面

    public class HomeController : Controller { public ActionResult Index() { //return View(); //return R ...

  4. BZOJ_3669_[Noi2014]魔法森林_LCT

    BZOJ_3669_[Noi2014]魔法森林_LCT Description 为了得到书法大家的真传,小E同学下定决心去拜访住在魔法森林中的隐士.魔法森林可以被看成一个包含个N节点M条边的无向图,节 ...

  5. tomcat设置直接通过域名访问项目（不需要接 /项目名）

    本文转自 : https://blog.csdn.net/qq_33647275/article/details/52585489 效果图 打开 tomcat - ->conf- ->se ...

  6. HttpClient4 TIME_WAIT和CLOSE_WAIT

    最近,公司的接口服务器(客户端,向外发送数据)频繁出现了connect timeout 以及readtime out 的情况,经过运维平台检测,并没有网络延时的情况.于是,开始怀疑连接池出了问题. 使 ...

  7. Django基础三（form和template）

    上一篇博文学习了Django的View和urls,接下来是对django form 和 template的学习. 1 django form django form为我们提供了便捷的方式来创建一些HT ...

  8. python yield用法 (tornado, coroutine)

    yield关键字用来定义生成器(Generator),其具体功能是可以当return使用,从函数里返回一个值,不同之处是用yield返回之后,可以让函数从上回yield返回的地点继续执行.也就是说,y ...

  9. C#中使用Bogus创建模拟数据

    原文:CREATING SAMPLE DATA FOR C# 作者:Bruno Sonnino 译文:C#中使用Bogus创建模拟数据 译者: Lamond Lu 背景 在我每次写技术类博文的时候,经 ...

  10. 前端利用百度开发文档给的web服务接口实现对某个区域周边配套的检索

    最近项目需要实现地图功能,以便于实现对房源周边配套设施的检索.内容如下 其实百度官方有对应的api,但是对于一个网站来说这样的样式难免有些难看 这样的结果显然不能满足当下的需求,所以我决定利用官方给的 ...