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. python之分析decode、encode、unicode编码转换

    decode()方法使用注册编码的编解码器的字符串进行解码.它默认为默认的字符串编码.decode函数可以将一个普通字符串转换为unicode对象.decode是将普通字符串按照参数中的编码格式进行解 ...

  2. Python集合set

    集合 set 集合是无序的 集合的值是唯一的 求两个集合的关系: list1 = [1,4,5,7,3,6,7,9] list2 = set([2,6,0,66,22,8,4]) list3 = se ...

  3. 转载：python + requests实现的接口自动化框架详细教程

    转自https://my.oschina.net/u/3041656/blog/820023 摘要: python + requests实现的接口自动化框架详细教程 前段时间由于公司测试方向的转型,由 ...

  4. &，|，^的用法

    &,|,~,^的用法 &按位与 |按位或 ~按位非 ^按位异或 举例: int x = 5; int y = 11; System.out.println(x|y); System.o ...

  5. token.go

    package sego // 字串类型,可以用来表达 //    1. 一个字元,比如"中"又如"国", 英文的一个字元是一个词 //    2. 一个分词, ...

  6. go语言nsq源码解读一-基本介绍

    简单介绍一下nsq. 参考 http://feilong.me/2013/05/nsq-realtime-message-processing-system 的介绍:NSQ是由知名短链接服务商bitl ...

  7. 理解Go Interface

    理解Go Interface 1 概述 Go语言中的接口很特别,而且提供了难以置信的一系列灵活性和抽象性.接口是一个自定义类型,它是一组方法的集合,要有方法为接口类型就被认为是该接口.从定义上来看,接 ...

  8. 基于Orangpi Zero和Linux ALSA实现WIFI无线音箱（二）

    作品已经完成,先上源码: https://files.cnblogs.com/files/qzrzq1/WIFISpeaker.zip 全文包含三篇,这是第二篇,主要讲述发送端程序的原理和过程. 第一 ...

  9. 【STM32H7教程】第10章 STM32H7的FLASH，RAM和栈使用情况（map和htm文件）

    完整教程下载地址:http://forum.armfly.com/forum.php?mod=viewthread&tid=86980 第10章       STM32H7的FLASH,RAM ...

  10. OSPF 高级实验

    一.环境准备 1. 软件:GNS3 2. 路由:c7200 二.实验操作 实验要求: 1.理解 OSPF 虚链路原理及何时需要使用虚链路. 2.掌握 OSPF 虚链路配置方法. 3.掌握 OSPF 的 ...