微信小程序使用阿里图标

微信小程序不支持外联阿里图标，必须下载放入小程序的本地文件中。

 

步骤一：下载项目图标

 

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

转换成功后会得到三个文件demo.html、iconfont.ttf、stylesheet.css。

 

步骤三：把转换成功的文件放入微信小程序

这是我项目的部署文件 static（静态文件，存放images、css）

把stylesheet.css改成stylesheet.wxss

建立一个文件iconfont.wxss(等下会有用，不建立关系也不大，看自己需求)

iconfont.wxss代码

@import "stylesheet.wxss";
@font-face {
  font-family: \'iconfont\';
  src: url(\'/lib/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\';}
.icon-gouwuche1:before{content:\'\e602\';}
.icon-huiyuan:before{content:\'\e664\';}
.icon-huiyuan1:before{content:\'\e714\';}


.icon-daifukuan:before{content:\'\e610\';}
.icon-yiwancheng:before{content:\'\e616\';}

.icon-daifahuo:before{content:\'\e61d\';}
.icon-daishouhuo:before{content:\'\e663\';}

建立这个文件的目的是把 阿里图标所有相关文件都在这个文件里处理，其他文件只需要调用这个confont.wxss即可

 

项目调用

index.wxss调用

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

 

index.wxml调用

<text class="iconfont icon-gouwuche"></text>

 

注意：微信小程序使用阿里图标的时候会报错，应该是不兼容问题；不过并不影响正常使用图标。