关于iconfont图标移动端或者普通图片在网页无法显示的解决方案

个人博客文章地址（推荐该链接阅读）

在服务器的web网页中引用了iconfont图标，在移动端访问该网页时，出现了无法显示图标的问题。

首先，列举一下图标（图片）无法显示的情况：

1.图标或图片名称写错或不存在，故无法显示

这是最低级的错误，需要仔细核对

2.图标或图片的引用地址有误

这是最为常见的错误，也是最需要注意的，基本上图片或图标无法显示都是因为这个原因
例如：

../layui/js

以及

./layui/js

这两种地址的写法一般情况下所指向的目录都是不同的，所以需要认真确认代码中的填写的引用地址是否正确

3.还有就是css之类的样式设置出错

由于网页的样式设置也有可能会导致图片无法被显示出来，图片被覆盖之类的

4.也有可能是浏览器缓存造成的，可以清空浏览器缓存试一下

以下是关于iconfont图标在移动端无法显示的解决方法

首先，图片在pc端是可以正常显示的，但是用手机打开网页的时候却无法显示

于是乎，在网上找到了这个方法，在css设置中将svg加载放到前面

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

但是我的网页图标不显示的问题依旧存在！！！

最后在手机端不经意间看到网址显示为http，但是在pc端（已部署ssl的情况下）是会自动转为https的，然后将手机端网址修改为https，图标得以正常显示！最后把设置设置一下网站的ssl为强制https就大功告成啦~