微信小程序使用阿里圖標

方法一：使用本地文件

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內容

 1 @import "stylesheet.wxss";
 2 /*
 3 @font-face {
 4   font-family: 'iconfont';
 5   src: url('iconfont.eot');
 6   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
 7   url('iconfont.woff') format('woff'),
 8   url('iconfont.ttf') format('truetype'),
 9   url('iconfont.svg#iconfont') format('svg');
10 }
11 */
12 .iconfont{
13   font-family: "iconfont" !important;
14   font-size: 12px;
15   font-style: normal;
16 }
17  
18 .icon-home:before{content:'\e613';}
19 .icon-home1:before{content:'\e7a3';}
20 .icon-gouwuche:before{content:'\e60c';}

 

5.使用

1     /* 在wxss導入 阿里圖標樣式*/
2     @import "/static/ali-icon/iconfont.wxss";  

1     /*wxml 文件使用阿里圖標*/
2     <text class="iconfont icon-fenlei li-ico"></text>