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

最新推荐文章于 2023-03-19 14:23:07 发布
最新推荐文章于 2023-03-19 14:23:07 发布
阅读量5.7k 收藏 9
点赞数
分类专栏： vue 字体图标兼容 文章标签： 字体图标兼容ie eot字体
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42204698/article/details/102630225
版权
在使用Element UI低版本的项目中，遇到字体图标在IE浏览器无法显示的问题。通过查看错误发现IE不支持eot字体。常规解决方案是将字体转换为eot格式，但该项目为线上打包，无法直接修改源码。采用样式覆盖的方法来解决：下载ttf或woff字体文件，转换为eot格式，然后在项目中引入并覆盖原有样式，使得在IE浏览器中图标显示正常。
摘要由CSDN通过智能技术生成

  • 在项目开发过程中，项目用到的是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相关的样式

最低0.47元/天 解锁文章
dearqz
关注
专栏目录
解决vue 项目引入字体图标报错、不显示等问题
10-18
在Vue项目中，引入字体图标是一项常见的操作，但有时可能会遇到...通过上述方法，大多数情况下都能顺利解决这些问题，让图标在项目中正常显示。在实际开发过程中，不断学习和积累经验，才能更好地应对各种技术难题。
Element-icons在部分IE10浏览器（非系统自带，自行下载或者补丁升级）无法正常显示问题
qq_39480597的博客
05-22 1021
最近项目要求需要兼容IE10，在兼容过程中发现element-icons的部分字体图片Icon在部分IE10中无法显示，在有的IE10浏览器中正常展示，这就比较耐人寻味了，但是由于部分的IE10可以，于是就有了以下思考： 首先在其他IE10,11，google，以及fiefox都可以正常展示 在部分IE10中无法正常展示，猜测有可能是IE10版本不完整 然后查阅资料，其实就是不支持项目中的字体，IE6-8支持的是eot，10,11已经支持woff，但是考虑到部分浏览器并非系统自带，就死马当成活马医，依
关于ElementUI 图标字体无法正常显示异常问题处理
Amilieier的博客
02-09 1637
昨天晚上一步步按照教程来做，但是却发生了导入本地化elementUI组件CDN文件后，图标显示异常的问题导致网页上无法显示elementui自带的小图标。 期间按照网上所说首先查看index.css和index.js二者对应版本的内容是否相同 我把他们都改成相同的内容 附文件内容链接 ： element-ui (v2.15.7) - Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。 | BootCDN - Bootstrap 中文网开源项目免费 CDN
【Element-UI】解决el-icon图标显示不出来的问题
热门推荐
AXIMI的博客
04-28 8万+
element-ui 图标icon的使用详见官网： https://element.eleme.cn/#/en-US/component/icon 问题背景： vue框架中使用element-ui，我的vue工程是使用脚手架创建的，是个vue webpack项目。 遇到的问题是： 在vue中加入elment-ui中的图标，但是页面上没有显示。页面部分代码为： <el-menu-item i...
BottomNavigationView导致闪退？——低版本安卓系统icon不能使用png图片
YR的博客
03-16 1100
笔者在做一个项目时使用了AS自带模板下的BottomNavigationView功能，前期程序打开一直没有问题，在换用Android6.0及以下版本手机时，总是程序一打开就意外停止运行，换用Android7.0以上手机均无此现象，AS反馈的信息是出错在了MainActivity里的： setContentView(R.layout.activity_on_running); 进行代码的逐行调试后发现在读取到BottomNavigationView里的menu后返回了错误id，程序终止运行： ap.
Vue3使用element-Icons在部分IE11，IE10线上无法正常显示，本地调试可以问题解决
qq_39480597的博客
06-10 1197
公司项目要求兼容IE10,11，项目使用的vue3 + element： 线上观察在IE11，中woff字体正常引入，但是只有在一次加载的时候才有效，刷新页面，所有icon字体都显示异常，故此考虑是否为在IE浏览器下，http（https）方式加载woff等字体文件解析有问题。 解决方案：将fonts相关文件打包时，调整为base64格式，不使用http 在项目中查看fonts使用的loader一会options配置 （小于4096会打包成base64格式） 在vuecofig.js中修改fon.
Vue项目中element-plus图标失效的一种解决办法
walkertc的博客
03-19 1869
引入官网的配置文件后，icon仍然不能正常显示，解决办法是在对应的vue文件中映入需要的icon图标即可。这个图标就需要做如下配置。
vue element项目引入icon图标的方法
08-27
本文主要介绍了在 Vue Element 项目中引入 Icon 图标的方法，旨在帮助开发者快速和高效地引入 Icon 图标，以提高用户体验和降低页面加载速度。 引入 Icon 图标的必要性 在 Web 开发中，使用 Icon 图标可以减少页面...
本地引入element不显示图标问题.doc
最新发布
03-20
本地引入Element UI图标不显示的问题通常是由于资源路径配置错误、文件格式兼容性问题、npm包版本不一致以及构建工具配置不当等原因引起的。通过上述分析和解决方案，开发者可以有效解决此类问题，确保项目的顺利...
Vue elementui字体图标显示问题解决方案
10-14
然而，在使用Element UI时，开发者可能会遇到字体图标不显示的问题，这通常会阻碍项目的正常进行。 字体图标显示问题可能是由于多种原因引起的，比如文件路径错误、字体文件损坏、项目配置不当等。针对这类问题，...
IE浏览器不支持getElementsByClassName的解决方法
09-04
在Web开发中，兼容性问题始终是一个不可忽视的挑战，尤其是在处理老版本的浏览器时，如Internet Explorer（IE）。在本文中，我们将深入探讨IE浏览器不支持`getElementsByClassName`方法的问题及其解决方案。 `...
2021-06-28 解决iconfont在IE下不兼容问题
菜鸟Player的博客
06-28 566
链接 1、首先排除图标本身是不是有问题； 2、排查加载的文件中是否有相同命名的 icon 样式文件和相同命名的字体文件（即字体的命名），如果有，改为不一样的； 3、外部引用样式的排查，包括不合理或多余的 font-family 定义； @font-face {font-family: ‘km-iconfont’; src: url(‘km-iconfont.eot’); /* IE9*/ src: local(’?’), url(‘km-iconfont.eot?#iefix’) format(‘embed
记一次elementUI Icon 加载无效的问题。并且提示错误 Failed to decode downloaded font:
dicha7140的博客
02-07 813
问题在于webpack的loader中。检查了一下发现有两个相同的file-loader的配置，删除其中一个即可。 转载于:https://www.cnblogs.com/CyLee/p/8425160.html
引入字体文件 and element-ui 自定义引入字体图标的一种方式
qq_44917015的博客
05-24 1505
@font-face { font-family: "element-icons"; src: url("fonts/element-icons.woff") format("woff"), url("fonts/element-icons.ttf") format("truetype"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ font-weight: normal; font-display: "auto
问题解决：Element不显示Icon图标
qq_46093355的博客
05-03 8060
第一种方法 （1）在文件下方加入以下代码，如下图所示。 @import url("//unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css"); （2）结果 注：第一种方法在我的界面中有的有效果有的没有，具体原因还没找到。 第二种方法 以在登录的输入框引入Avatar图标为例，图标集合可以在这里面找图标名字：图标合集，链接失效的话直接百度搜索Element官网进去就有。 （1）终端安装 npm install @element-plus/icon
element - ui 中 element-icons 在 IE 11 的兼容
siwangdexie_copy的博客
01-24 2023
参考信息：CSS3114: @font-face 未能完成 OpenType 嵌入权限检查。 背景： UI组件： elemnt ui 框架：vue 描述： 项目在 IE 11 环境下 报 CSS3114: @font-face 未能完成 OpenType 嵌入权限检查。权限必须是可安装的。 element-icons.6f0a763.ttf 经查，需添加 eot 格式 字体 1、编辑器搜索 ...
IE兼容、cssHack 、iconfont字体图标
m0_72434037的博客
08-01 176
安装软件ietester测试低版本ie的兼容问题，这个软件里集成好多版本的ie（IE5.5IE6IE7IE8IE9）在IE7及以下版本，li的子元素有浮动（浮动的元素的个数至少2个），li和li之间会有间隙。在IE6及以下版本，浮动元素设置margin-left，最左侧的盒子会出现双倍边距。在IE6和IE7里，给子元素设置相对定位，给父元素设置溢出隐藏，溢出隐藏会失效。在IE7及以下版本出现，块元素转内联块元素不在一行显示。在IE5和IE6里，透明的颜色会变成黑色。...
element-ui图标不显示问题(已解决）
sagiiiii的博客
03-03 8351
方法1：在package.json中修改element-UI版本号 方法二：(如果经方法一还是不能显示图标) main.js里面统一注册icon // 统一导入el-icon图标 import * as ElIconModules from '@element-plus/icons' // 统一注册el-icon图标 for(let iconName in ElIconModules){ app.component(iconName,ElIconModules[iconName]) } 方法三
Vue+ElementUI适应IE浏览器
giscoder的博客
11-26 1264
问题 由于IE浏览器的特殊性，在Chrome或其他浏览器下编译好的程序，在IE下需做特殊的处理，所以IE这个物种的存在，对前端开发人员来说特别痛苦，最近在使用ElementUI前端框架开发项目的过程中就遇到了IE下显示不了的问题。现将解决方法记录如下： PS：ElementUI环境的搭建，请移步：https://www.jianshu.com/p/4585d43e9e14 解决方法 1.在项目中安...
解决IE与火狐浏览器的兼容性问题
"本文档主要讨论了在Internet Explorer（IE）和Mozilla Firefox（火狐）之间常见的兼容性问题，并提供了相应的解决方案。这些问题涉及到DOM操作、事件处理以及JavaScript对象的访问方式等。" 在Web开发中，IE和火狐...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值