https://blog.csdn.net/m0_37893932/article/details/79460652

********************************************

前言

官方推荐的cssjs引用方式如下:

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

这种方式引入,如果环境只有内网,没有外网的话,会导致页面直接空白.


很简单把csshrefjssrc的网址输入浏览器可以得到cssjs的源码,直接拷贝到本地即可.
但是问题来了,element-uiindex.css拷贝本地之后,会发现图标无法正常显示了.


分析

F12查看网络发现icon的请求地址

点开详情发现请求链接(element版本不同这里网址应该也是不同的)

解决办法

访问https://unpkg.com/element-ui@1.4.13/lib/theme-default/fonts/element-icons.woff?t=1472440741
element-icons.woff文件自动下载下来,放到项目的/css/fonts文件夹下即可

原因

在本地的index.css中发现如下代码是网络请求icon

@font-face {
font-family: element-icons;
src: url(fonts/element-icons.woff?t=1472440741) format('woff'), url(fonts/element-icons.ttf?t=1472440741) format('truetype');
font-weight:;
font-style: normal
}

###安装地址

http://element-cn.eleme.io/#/zh-CN/component/installation

字体的路径

https://unpkg.com/element-ui@2.4.6/lib/theme-chalk/fonts/

非网络引用element-ui css导致图标无法正常显示的解决办法的更多相关文章

  1. 网页引用本地电脑的字体 css设置浏览器会不显示的解决办法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. TortoiseGit状态图标不能正常显示的解决办法

    1:确认是不是64bit 系统上装了 32bit 的 TortoiseGit,如果是的话,这个只要再安装 64bit 的 TortoiseGit就可以 了,如果不是,请往下看.   2:在开始菜单的搜 ...

  3. webpack打包绝对路径引用资源和element ui字体图标不显示的解决办法

    webpack打包绝对路径引用资源解决办法: 打开webpack.prod.conf.js 找到output:增加 publicPath: './',  即可,如图  element ui字体图标不显 ...

  4. element ui 上传文件,读取内容乱码解决

    element ui 上传文件,读取内容乱码解决: 加第二个参数 reader.readAsText(file.raw,'gb2312'); <el-upload class="upl ...

  5. win32绘制自定义类窗口导致绘制11个窗口的解决办法

    上网查了一圈也没有找到解决问题的办法,一旦创建了一个窗口,并且在过程函数中绘制窗口,尤其是一些非子窗口的自定义类窗口,都会生成11个窗口(算上主窗口就是12个),但是使用系统通用控件就不会有这种情况的 ...

  6. QQ文件没有读取权限,60017导致QQ无法登陆的终极解决办法

    每隔一段时间,我的QQ就无法登陆,提示:QQ文件没有读取权限,60017导致QQ无法登陆的终极解决办法 点击了解详情发现里面的解决办法根本不起作用,网上 说的各种解决办法都不起作用,解决办法如下 1. ...

  7. 正在运行的android程序,按home键之后退回到桌面,在次点击程序图标避免再次重新启动程序解决办法

    正在运行的android程序,按home键之后退回到桌面,在次点击程序图标避免再次重新启动程序解决办法 例如:一个android程序包含两个Activity,分别为MainActivity和Other ...

  8. Response.Write()方法响应导致页面字体变大的解决办法

    关于ASP.NET中用Response.Write()方法响应导致页面字体变大的解决办法     最近研究了ASP.NET,发现一个问题,比方说在页面里面有个Button,要点击以后要打开新窗口,而且 ...

  9. Oracle数据库误删文件导致rman备份报错RMAN-06169解决办法

    Oracle数据库误删文件导致rman备份报错RMAN-06169解决办法 可能是误删文件导致在使用rman备份时候出现以下提示 RMAN-06169: could not read file hea ...

随机推荐

  1. MongoDB学习笔记(11)-- Index

    索引通常能够极大的提高查询的效率,如果没有索引,MongoDB在读取数据时必须扫描集合中的每个文件并选取那些符合查询条件的记录. 这种扫描全集合的查询效率是非常低的,特别在处理大量的数据时,查询可以要 ...

  2. tableView的用法具体解释

    1 tableView的类型   1.1 UITableViewStylePlain  没有区头 不显区头     向上滑动区头不会移动到屏幕外面 ' 1.2 UITableViewStyleGrou ...

  3. jms异步转同步调用实例

    思路: 当主线程调用异步方法时,将自己挂起,并把引用交给jms的监听: 当监听收到返回的消息时,处理并唤醒主线程继续执行(可以获取和处理返回的消息) Test.java package com.my. ...

  4. 【转】java io 流 设计模式

    知识点:什么是装饰模式: http://wenku.baidu.com/view/ad4eac9f51e79b896802263b.html(原理讲的很清楚) http://wenku.baidu.c ...

  5. Python 爬虫 解决escape问题

    爬取某个国外的网址,遇到的编码问题 ,在前段页面 返回的数据是 亞洲私人珍藏賣,令仝好分享他為此 所傾注的心血與熱愛。 爬虫源码是: url = 'http://www.bonhams.com/auc ...

  6. eclipse创建activiti6 项目demo

    1 新建maven 项目 2 修改 pom 文件,完整内容如下 <?xml version="1.0" encoding="UTF-8"?> < ...

  7. python3 如何给装饰器传递参数

    [引子] 之前写过一篇文章用来讲解装饰器(https://www.cnblogs.com/JiangLe/p/9309330.html) .那篇文章的定位是入门级的 所以也就没有讲过多的高级主题,决定 ...

  8. mysql -- 优化之ICP(index condition pushdown)

    一.为了方法说明ICP是什么.假设有如下的表和查询: create table person( id int unsigned auto_increment primary key, home_add ...

  9. scala中json与对象的转换

    遇到的问题 因为要把spark从es读出来的json数据转换为对象,开始想用case class定义类型,通过fastjson做转换.如下 case class Book (author: Strin ...

  10. jQuery学习笔记(jquery.validate插件)

    jquery.validate官网地址:http://jqueryvalidation.org/ 1. 导入JavaScript库 <script src="../js/jquery. ...