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. SqlServer安装时的选项说明

    转自:https://blog.csdn.net/m0_37154839/article/details/80233446 看看组件的功能说明吧 服务器组件 说明 SQL Server 数据库引擎 S ...

  2. 大道至简的C语言内存管理

    C语言内存的开辟和释放需要程序员自己来实现. 而C语言的内存开辟和释放只在stdlib.h里面提供了四个函数,这么简洁的设计就足以完成一切工作. C++里面各种类型的指针漫天飞舞,显得啰嗦冗余. ca ...

  3. SQLDumpSplitter sql文件分割工具

    数据库误操作,只好使用使用原来的备份数据去恢复数据,但是数据量太大,只好使用SQLDumpSplitter将大文件分割成小文件,然后恢复指定的表即可.

  4. Elasticstack 5.1.2 集群日志系统部署及实践

    Elasticstack 5.1.2 集群日志系统部署及实践 一.ELK Stack简介 ELK Stack 是Elasticsearch.Logstash.Kibana三个开源软件的组合,在实时数据 ...

  5. 树莓派进阶之路 (032) -字符问题(2) - 用c语言怎样得到一个汉字的GB2312编码(转)

    C/C++支持的是ASCII,不过汉字编码中,GB2312与ASCII是兼容的,所以可以在C中获得汉字的GB2312编码 GB2312是两个字节的,第一字节是高八位,第二字节是低八位,比如下面的程序: ...

  6. Redis学习之路(004)- 报错及问题

    在i配置编译的过程中,遇到一下问题: 1. /redis_test: error while loading shared libraries: libhiredis.so.0.13: cannot ...

  7. C# WinForm给Button或其它控件添加快捷键响应

    今天做东西遇到要给按钮添加快捷键.就在这介绍三种添加快捷键的方式. 第一种Alt + *(按钮快捷键) 在大家给button.label.menuStrip等控件设置Text属性时在名字后边加& ...

  8. 在Linux上rpm安装运行Redis 3.0.4

    http://www.rpmfind.net搜索redis,找到redis3.0.4的rpm源选做 wget ftp://fr2.rpmfind.net/linux/remi/enterprise/6 ...

  9. formValidator输入验证、异步验证实例 + licenseImage验证码插件实例应用

    实例技术:springmvc 实现功能:完整用户登录流程.输入信息规则校验.验证码异步校验. 功能清单: 1.springmvc控制器处理get请求(/member/login.html),进行静态页 ...

  10. numpy.linspace()等差数列函数

    在numpy中的linspace()函数类似与arange().range()函数: arange() .range() 可以通过指定开始值.终值和步长创建一维等差数组,但其数组中不包含终值 通过   ...