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. java中Collection容器

    1.容器(Collection)也称为集合, 在java中就是指对象的集合. 容器里存放的都只能是对象. 实际上是存放对象的指针(头部地址): 这里对于八种基本数据类型,在集合中实际存的是对应的包装类 ...

  2. React-router v4教程

    在这个教程里,我们会从一个例子React应用开始学习react-router-dom.其中你会学习如何使用Link.NavLink等来实现跳转,Switch和exact实现排他路由和浏览器路径历史. ...

  3. TestNG深入理解

    以下内容引自: http://blog.csdn.net/wanglha/article/details/42004695 TestNG深入理解 转载 2014年12月18日 13:56:11 参考文 ...

  4. c# 如何找到项目中图片的相对路径

    c# 如何找到项目中图片的相对路径 string path = System.Environment.CurrentDirectory;//非Web程序if (System.Environment.C ...

  5. Elasticsearch笔记七之setting,mapping,分片查询方式

    Elasticsearch笔记七之setting,mapping,分片查询方式 setting 通过setting可以更改es配置可以用来修改副本数和分片数. 1:查看,通过curl或浏览器可以看到副 ...

  6. 【线段树】Bzoj1230 [Usaco2008 Nov]lites 开关灯

    Description Farmer John尝试通过和奶牛们玩益智玩具来保持他的奶牛们思维敏捷. 其中一个大型玩具是牛栏中的灯. N (2 <= N <= 100,000) 头奶牛中的每 ...

  7. mysql服务设置远程连接 解决1251 client does not support ..问题

    在docker里面创建mysql容器后设置的密码在远程主机连接时候出现错误: 一.如果是在docker里面安装的mysql镜像则需要先进入mysql里面:参考上一篇:https://www.cnblo ...

  8. struts2--值栈

    值栈是对应每一个请求对象的轻量级的数据存储中心,在这里统一管理着数据,供Action.Result.Interceptor等Struts2的其他部分使用,这样数据被集中管理起来而不凌乱.当有请求的时候 ...

  9. .Net开发者必知的技术类RSS订阅指南

    目录 RSS订阅资源 .Net基金会 MSDN中文版 杂志 微软 Github 系列 微软DevBlog系列 InfoQ中文版系列 如何找到大佬的 Twitter/Youtube/Stackoverf ...

  10. 网页的cdn引用地址,js,react,bootstrap

    react+----这三个够用了 <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js">< ...