非网络引用element-ui css导致图标无法正常显示的解决办法
https://blog.csdn.net/m0_37893932/article/details/79460652
********************************************
前言
官方推荐的css
及js
引用方式如下:
<!-- 引入样式 -->
<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>
这种方式引入,如果环境只有内网,没有外网的话,会导致页面直接空白.
很简单把css
的href
及js
的src
的网址输入浏览器可以得到css
和js
的源码,直接拷贝到本地即可.
但是问题来了,element-ui
的index.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导致图标无法正常显示的解决办法的更多相关文章
- 网页引用本地电脑的字体 css设置浏览器会不显示的解决办法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- TortoiseGit状态图标不能正常显示的解决办法
1:确认是不是64bit 系统上装了 32bit 的 TortoiseGit,如果是的话,这个只要再安装 64bit 的 TortoiseGit就可以 了,如果不是,请往下看. 2:在开始菜单的搜 ...
- webpack打包绝对路径引用资源和element ui字体图标不显示的解决办法
webpack打包绝对路径引用资源解决办法: 打开webpack.prod.conf.js 找到output:增加 publicPath: './', 即可,如图 element ui字体图标不显 ...
- element ui 上传文件,读取内容乱码解决
element ui 上传文件,读取内容乱码解决: 加第二个参数 reader.readAsText(file.raw,'gb2312'); <el-upload class="upl ...
- win32绘制自定义类窗口导致绘制11个窗口的解决办法
上网查了一圈也没有找到解决问题的办法,一旦创建了一个窗口,并且在过程函数中绘制窗口,尤其是一些非子窗口的自定义类窗口,都会生成11个窗口(算上主窗口就是12个),但是使用系统通用控件就不会有这种情况的 ...
- QQ文件没有读取权限,60017导致QQ无法登陆的终极解决办法
每隔一段时间,我的QQ就无法登陆,提示:QQ文件没有读取权限,60017导致QQ无法登陆的终极解决办法 点击了解详情发现里面的解决办法根本不起作用,网上 说的各种解决办法都不起作用,解决办法如下 1. ...
- 正在运行的android程序,按home键之后退回到桌面,在次点击程序图标避免再次重新启动程序解决办法
正在运行的android程序,按home键之后退回到桌面,在次点击程序图标避免再次重新启动程序解决办法 例如:一个android程序包含两个Activity,分别为MainActivity和Other ...
- Response.Write()方法响应导致页面字体变大的解决办法
关于ASP.NET中用Response.Write()方法响应导致页面字体变大的解决办法 最近研究了ASP.NET,发现一个问题,比方说在页面里面有个Button,要点击以后要打开新窗口,而且 ...
- Oracle数据库误删文件导致rman备份报错RMAN-06169解决办法
Oracle数据库误删文件导致rman备份报错RMAN-06169解决办法 可能是误删文件导致在使用rman备份时候出现以下提示 RMAN-06169: could not read file hea ...
随机推荐
- Swift Protobuf 初探 —— 继 XML 后,JSON 也要被淘汰了吗
Protocol Buffers 是什么? Protocol buffers are Google’s language-neutral, platform-neutral, extensible m ...
- IT编年史 技术生命周期起步,成长,成熟和衰退四个阶段 IT历史总结
IT编年史 最近查看了大量的正史或者野史,体会了整个IT夜发展的风气云涌,颇为激动,撰写如下. 感谢google黑板报的浪潮之巅http://googlechinablog.com/2007/07/a ...
- Android Studio 2.3 正式版新功能,你不来看看?!
2017.3.3 Google老大发布了Android Studio 2.3正式版. 在许多2.3beta版本的基础上修复了bug然后推出了正式版.提供了一些新特性,和对部分已有功能的修改完善. Bu ...
- macOS SIP 权限设置
1.macOS SIP 权限设置 对于 macOS 10.11+ 用户,由于系统启用了 SIP(System Integrity Protection), 导致 root 用户也没有权限修改 /usr ...
- [企业化NET]Window Server 2008 R2[3]-SVN 服务端 和 客户端 基本使用
1. 服务器基本安装即问题解决记录 √ 2. SVN环境搭建和客户端使用 2.1 服务端 和 客户端 安装 √ 2.2 项目建立与基本使用 √ 2.3 基本冲突解决, ...
- SharePoint 2013 Backup Farm Automatically With a Powershell and Windows Task Schedule
In this post,I will show you SharePoint 2013 How to Backup Farm Automatically with a PowerShell and ...
- linux中合并多个文件内容到一个文件的例子
尊敬的用户您好,从即日起 导入 及 导出 功能已经下线,请到阿里云官方数据库管理平台 iDB Cloud 使用该功能! 继续在 iDB Cloud 中发现导出的数据库文件是按照每个表生成的SQL文件, ...
- Spring boot validation校验
使用 Hibernate validator 的步骤:1. 在 Pojo 类的字段上, 加上 Hibernate validator 注解2. 在Controller 函数的形参前加上 @Valid ...
- 转: 使用Hystrix实现自动降级与依赖隔离
使用Hystrix实现自动降级与依赖隔离 原创 2017年06月25日 17:28:01 标签: 异步 / 降级 869 这篇文章是记录了自己的一次集成Hystrix的经验,原本写在公司内部wiki里 ...
- 转: FFmpeg功能命令汇总
原文: FFmpeg功能命令汇总 前言 如此强大的FFmpeg,能够实现视频采集.视频格式转化.视频截图.视频添加水印.视频切片.视频录制.视频推流.更改音视频参数功能等.通过终端命令如何实现这些功能 ...