1***@qq.com
1***@qq.com
  • 发布:2018-09-14 20:53
  • 更新:2018-09-16 11:07
  • 阅读:2640

阿里的iconfont 如何引用?

分类:uni-app

弄了半天也没弄好

2018-09-14 20:53 负责人:无 分享
已邀请:
王者地带

王者地带 - 5+混合APP开发教程网 | http://www.html5-app.com | 咨询QQ: 2564034335

用iconfont的远程图标

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

    我尝试了两种引用方式

    1、font-class

    style里面这样引用 @import "//at.alicdn.com/t/font_838481_xf0sv613r0e.css";

    编译报错

    2、字体

    @ font-face {

    font-family:'iconfont';

    / project id 838481 /

    src:url('// at.alicdn.com/t/font_838481_xf0sv613r0e.eot');

    src:url('// at.alicdn.com/t/font_838481_xf0sv613r0e.eot?#iefix')格式('embedded-opentype'),

    url('// at.alicdn.com/t/font_838481_xf0sv613r0e.woff')格式('woff'),

    url('// at.alicdn.com/t/font_838481_xf0sv613r0e.ttf')格式('truetype'),

    url('// at.alicdn.com/t/font_838481_xf0sv613r0e.svg#iconfont ')format('svg');

    }

    .studied:before {

    font-family: 'iconfont'!important;

    font-size:36px;

    font-style:normal;

    content: "\e603";

    }

    显示方框

    2018-09-16 10:08

w***@qq.com

w***@qq.com

把你下载的css文件开头换成如下格式:
@font-face {
font-family: "wui-icon";
font-weight: normal;
font-style: normal;
src: url('http://www.xxxxx.com/fonts/wui.ttf') format('truetype');
}

.wui-icon {
font-family:"wui-icon" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

把"wui"换成你自己的。就可以使用了。
需要把字体文件上传到你自己的服务器上。

贴一个完整文件。

@font-face {
font-family: "wui-icon";
font-weight: normal;
font-style: normal;
src: url('http://www.xxxxx.com/fonts/wui.ttf') format('truetype');
}

.wui-icon {
font-family:"wui-icon" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-sign:before { content: "\e601"; }

.icon-plus:before { content: "\e6b3"; }

.icon-date-time:before { content: "\e71e"; }

.icon-lists:before { content: "\e65a"; }

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

    我引用阿里的在线字体文件不行吗?

    @font-face {

    font-family: 'iconfont';

    / project id 838481 /

    src: url('//at.alicdn.com/t/font_838481_xf0sv613r0e.eot');

    src: url('//at.alicdn.com/t/font_838481_xf0sv613r0e.eot?#iefix') format('embedded-opentype'),

    url('//at.alicdn.com/t/font_838481_xf0sv613r0e.woff') format('woff'),

    url('//at.alicdn.com/t/font_838481_xf0sv613r0e.ttf') format('truetype'),

    url('//at.alicdn.com/t/font_838481_xf0sv613r0e.svg#iconfont') format('svg');

    }

    2018-09-16 09:50

1***@qq.com

1***@qq.com (作者) - 有德于我,我必尊之

这个错误什么什么意思?

1***@qq.com

1***@qq.com (作者) - 有德于我,我必尊之

已解决
阿里提供的在线链接,前面需要加上http:

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