微信小程序使用阿里圖標

微信小程序不支持外聯阿里圖標，必須下載放入小程序的本地文件中。

 

步驟一：下載項目圖標

 

步驟二：轉換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>

 

注意：微信小程序使用阿里圖標的時候會報錯，應該是不兼容問題；不過並不影響正常使用圖標。