菜鸡源码,专注精品下载!
当前位置:首页 > 建站教程 > 建站知识

解决IE浏览器无法显示加载iconfont阿里巴巴图标的问题

发布时间:2024-01-05  栏目:建站知识   浏览:   分类:css教程 阿里巴巴图标 IconFont

如果你在使用IE浏览器时发现iconfont阿里巴巴图标没有显示,你可以尝试以下方法解决: 1. 检查你的HTML文件中是否引入了正确的CSS文件。确保你已经正确地引入了iconfont的CSS文件,并且路径正确。 2. 检查你的HTML文件中是否使用了正确的类名。确保你在HTML文件中使用了正确的类名来引用iconfont图标。 3. 如果以上两个步骤都没有问题,那么你可以尝试清除浏览器缓存。有时候浏览器缓存可能会导致一些样式或脚本无法正常加载。

IconFont图标是阿里出品的一款字体图标工具,不得不说非常好用,速度快,图标资源多,是国内程序员不可缺少的工具之一。官网:https://www.iconfont.cn/

IE不显示加载iconfont阿里巴巴图标的解决方法

iconfont图标截图

iconfont加载方法

第一步:拷贝项目下面生成的font-face

@font-face{font-family:'iconfont';src:url('iconfont.eot');src:url('iconfont.eot?#iefix')format('embedded-opentype'),url('iconfont.woff')format('woff'),url('iconfont.ttf')format('truetype'),url('iconfont.svg#iconfont')format('svg');}

第二步:定义使用iconfont的样式

.iconfont{font-family:"iconfont"!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale;}

第三步:挑选相应图标并获取字体编码,应用于页面

<iclass="iconfont">&#x33;</i>

IE不加载iconfont解决方法

这是菜鸡源码写的加载iconfont的代码,如下图,安装官网给的例子,所有浏览器没有任何问题,除了IE,就是不显示。

IE不显示加载iconfont阿里巴巴图标的解决方法

iconfont代码

用浏览器的加载工具栏查看,发现引用的字体文件既然是404,如下图

IE不显示加载iconfont阿里巴巴图标的解决方法

试着把加载代码改成绝对路径,

@font-face{font-family:"iconfont";src:url('/Style/fonts/iconfont.eot?t=1602257904803');/*IE9*/src:url('/Style/fonts/iconfont.eot?t=1602257904803#iefix')format('embedded-opentype'),/*IE6-IE8*/url('/Style/fonts/iconfont.woff?t=1602257904803')format('woff'),url('/Style/fonts/iconfont.ttf?t=1602257904803')format('truetype'),/*chrome,firefox,opera,Safari,Android,iOS4.2+*/url('/Style/fonts/iconfont.svg?t=1602257904803#iconfont')format('svg');/*iOS4.1-*/}

问题解决,IE就显示了。

评论
建站知识
建站知识
使用技巧
调试安装
运营推广