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. main.go

    package main import (     "flag"     "fmt"     "log"     "os" ...

  2. Hibernate Annotation _List/Map

    // Student.java 实体类 package com.tao.pojo; import java.util.List; public class Student { private int ...

  3. 【二分+最小树形图】UVA11865 比赛网络

    Description During 2009 and 2010 ICPC world finals, the contest was webcasted via world wide web. Se ...

  4. BZOJ_1407_[Noi2002]Savage_EXGCD

    BZOJ_1407_[Noi2002]Savage_EXGCD Description Input 第1行为一个整数N(1<=N<=15),即野人的数目. 第2行到第N+1每行为三个整数C ...

  5. solr+jieba结巴分词

    为什么选择结巴分词 分词效率高 词料库构建时使用的是jieba (python) 结巴分词Java版本 下载 git clone https://github.com/huaban/jieba-ana ...

  6. 加密算法：DigestUtils与java MessageDigest

    1.使用Spring的DigestUtils public class StringUtilTest { static final String TARGET = "changeme&quo ...

  7. java基础常见面试题，这是一篇超长的随笔！！！

    1. Java基础部分....................................................... 4 1.一个".java"源文件中是否可以包括 ...

  8. 【工具篇】抓包中的王牌工具—Fiddler （1-环境搭建）

    导言 在现在高速发展的互联网时代,抓包工具被广泛应用在软件开发的项目中,Fiddler可谓是当下主流的抓包工具之一.测试人员用它来抓包.回放测试记录,构造发包测试用例,开发人员用来定位问题,其强大的功 ...

  9. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  10. RabbitMQ死信队列另类用法之复合死信

    前言 在业务开发过程中,我们常常需要做一些定时任务,这些任务一般用来做监控或者清理任务,比如在订单的业务场景中,用户在创建订单后一段时间内,没有完成支付,系统将自动取消该订单,并将库存返回到商品中,又 ...