微信小程序使用阿里图标

方法一：使用本地文件

1 下载阿里图标到本地 http://iconfont.cn/ 

 

2.转换iconfont.ttf文件（小程序的wxss文件的font-face的url不接受http地址作为参数,但可以接受base64,因此需将字体文件下载后,转换为base64。用网址https://transfonter.org/转换)

 

3.文件解压

解压后会得到三个文件：demo.html，iconfont.ttf，stylesheet.css。下面会需要iconfont.ttf，stylesheet.css拷贝到ali-con目录下

 

4.建立路径

在根目录下建立static/ali-con存放阿里图标内容。其中建立iconfont.acss是方便管理阿里图标

 

iconfont.wxss内容

@import "stylesheet.wxss";
/*
@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{
  font-family: "iconfont" !important;
  font-size: 12px;
  font-style: normal;
}

.icon-home:before{content:'\e613';}
.icon-home1:before{content:'\e7a3';}
.icon-gouwuche:before{content:'\e60c';}

 

5.使用

/* 在wxss导入 阿里图标样式*/
@import "/static/ali-icon/iconfont.wxss";  

/*wxml 文件使用阿里图标*/
<text class="iconfont icon-fenlei li-ico"></text>

 

小程序高级群：336925436