字体图标在ie兼容问题（element低版本icon）（图标在ie浏览器不显示）

在项目开发过程中，项目用到的是element组件，版本号是2.4.7，遇到了图标字体在ie浏览器不显示的问题，这是在同事电脑出现的bug，我电脑同样是ie，11版本和10版本都没有问题，但是在同事电脑哪个版本都显示不出来，纠结了半天
看到ie里报的错误是这样的
CSS3114: @font-face 未能完成 OpenType 嵌入权限检查。权限必须是可安装的。
在网上搜都是千篇一律的答案，像这样的：
核心就是ie不支持eot字体，需要特定转换：url('fonts/webfont.eot?#iefix') format('embedded-opentype')
可是我用的是element，上哪去转换这个字体图标？当然得去element里了，一种方式是直接修改里面的源码，可是我的项目是线上打包，所以在本地修改源码是部署不到线上去的，故我采取了第二种方式：样式覆盖
1、首先看element与icon相关的样式或者说需要修改的部分：
在node-modules文件夹下找到组件位置
2、找到fonts文件夹，eot文件初始是不存在的，为兼容ie，你需要把woff文件或者ttf文件在网上找个在线转换器转换成eot文件以便后面使用
3、按照上图箭头方向找到index.css，打开并找到设置icon图标的样式

如图：红色框内就是需要修改的位置，黄色框内就是需要添加的内容，下面看看怎么覆盖它们：
4、首先把第一张图的fonts文件夹下的三种类型图标复制到项目静态文件夹下
5、然后在项目公共样式部分填写样式覆盖element中图标设置样式，让兼容eot生效

/*common.css*/
@font-face {font-family: element-icons;src: url('fonts/element-icons.woff') format("woff"),url('fonts/element-icons.ttf') format("truetype"),url('fonts/element-icons.eot?#iefix') format("embedded-opentype");font-weight: 400;font-style: normal;
}

这样就完全实现了在ie中兼容图标的写法，欢迎指正与补充

字体图标在ie兼容问题（element低版本icon）（图标在ie浏览器不显示）相关推荐

浏览器尺寸判断（兼容标准及低版本ie浏览器）
1.总体思路:先判断浏览器类型,再根据不同浏览器类型用不同方法获取浏览器尺寸: 2.html <!DOCTYPE html> <html><head><met ...
背景色透明兼容写法，兼容IE8等低版本浏览器
现在虽然好多企业公司放弃了兼容IE8及以下的浏览器,但是免不了在做一些政府网站时会要求兼容低版本.工作中遇到的,做下总结,以便以后查阅方便设置背景色半透明背景色透明兼容写法,兼容IE8等低版本浏览器 ...
IE低版本提示下载新的浏览器js--IEOutTips.zip
代码下载地址:IE低版本提示下载新的浏览器js--IEOutTips.zip-桌面系统文档类资源-CSDN下载操作把"IeOutTips"文件夹放到项目根目录"js& ...
window 下兼容多各低版本的chrome测试
分享我做前端浏览器版本兼容测试遇到Chrome不能多版本共存,存在高版本覆盖低版本问题的解决方案,这个方法不影响Windows系统内已安装的Chrome下载你想要的chrome版本,我是在这里找寻下载 ...
获取/设置浏览器scrollTop，兼容低版本ie及各主流浏览器
考虑到兼容各个浏览器,以及兼容低版本ie,经过自己测试,提出以下方法封装,仅供参考: <script>/*** @method getScrollTop 获取scrollTop*/func ...
qt修改程序图标名称_解决Qt应用程序添加icon图标，修改窗口图标以及添加系统托盘问题...
一.Qt应用程序添加icon图标的方法: 首先,我们需要先准备两个文件,一个是icon图标,另一个是rc文件,我分别命名为"myApp.rc"和"soft.ico&quo ...
解决vue低版本ios，安卓手机浏览器打开H5页面空白的问题
低版ios手机ios8,ios9,安卓6以后的自带浏览器打开VUE开发的H5页面有时候会出现白屏的问题,这是因为vue 项目中es6的方法和语法在这些低版本的手机上不支持,解决办法 es6转es5 一 ...
微信小程序使用阿里图标库（iconfont）封装自定义的icon图标组件
一.通过阿里图标库生成iconfont.wxss 1.登录阿里图标库官网https://www.iconfont.cn/,新建一个项目,例如我新建的项目是my-icon 2.把需要的图标加入购物车,然 ...
python图标icon_【Python】站长之家icon图标爬虫
本帖最后由 lihaisanhui 于 2020-3-16 15:50 编辑说明:我又来了!!!这次写的是站长之家的icon图标爬虫这是一个坛友定做,我花了1上午赶工出来的,写的不好勿喷!数据源: ...

字体图标在ie兼容问题（element低版本icon）（图标在ie浏览器不显示）

字体图标在ie兼容问题（element低版本icon）（图标在ie浏览器不显示）相关推荐

最新文章

热门文章