1***@qq.com
1***@qq.com
  • 发布:2018-08-03 12:55
  • 更新:2018-08-03 14:31
  • 阅读:3095

根据官方教程引入自定义图标时显示方框

分类:MUI

详细问题描述
我新建了一个项目然后按照官方自定义方法引入阿里iconfont的图标后,电脑端浏览器可以显示图标,手机无法显示图标

重现步骤
新建项目-根据官方自定义图标文档进行配置引入
结果无法在手机上无法显示,显示一个方框框里边还有个叉叉
期望可以恢复好

运行环境
安卓:安卓版本嗯7.0
浏览器版本:谷歌版本 66.0.3359.181(正式版本) (32 位)
[IDE版本] 9.1.13.201807311918
[mui版本] Mui v3.7.2

附件
@font-face {
font-family: "iconfont";
src: url('../fonts/iconfont.ttf') format('truetype');
/ chrome、firefox、opera、Safari, Android, iOS 4.2+/
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/iconfont.css" />
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<span class="mui-icon iconfont icon-qiandai" style="font-size: 100px;"></span>
</body>
</html>
[安装包]

联系方式
1553420481@qq.com
[电话]
15291817752

2018-08-03 12:55 负责人:无 分享
已邀请:
m***@sina.com

m***@sina.com - 不忘初心

<span class="mui-icon iconfont icon-qiandai" style="font-size: 100px;"></span>

去掉 mui-icon 试试

1***@qq.com

1***@qq.com (作者)

问题已经解决了 这个跟这个没有关系,我按照官方的配置那样下来以后就是一直不显示一直都是个方框框,然后我没有按照官方的去配置 我是直接把下载下来的东西直接原封不动的放到css目录 直接在页面引入css就好了,感谢关注和支持

  • m***@sina.com

    我用的icomoon,下载就没改直接用的,也就是改改路径啥的。


    @font-face {

    font-family: 'icomoon';

    src: url('icomoon.eot?dqsi6k');

    src: url('icomoon.eot?dqsi6k#iefix') format('embedded-opentype'), url('icomoon.ttf?dqsi6k') format('truetype'), url('icomoon.woff?dqsi6k') format('woff'), url('icomoon.svg?dqsi6k#icomoon') format('svg');

    font-weight: normal;

    font-style: normal;

    }

    [class^="icon-"], [class=" icon-"] {

    /
    use !important to prevent issues with browser extensions that change fonts /

    font-family: 'icomoon' !important;

    speak: none;

    font-style: normal;

    font-weight: normal;

    font-variant: normal;

    text-transform: none;

    line-height: 1;

    /
    Better Font Rendering =========== */

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    }

    .icon-home:before {

    content: "\e900";

    }

    2018-08-03 14:38

该问题目前已经被锁定, 无法添加新回复