方法一：使用本地文件

1 下載阿里圖標到本地?http://iconfont.cn/

?

2.轉換iconfont.ttf文件（小程序的wxss文件的font-face的url不接受http地址作為參數(shù),但可以接受base64,因此需將字體文件下載后,轉換為base64。用網(wǎng)址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>

?

轉載于:https://www.cnblogs.com/gzh529/p/10179278.html

總結

以上是生活随笔為你收集整理的微信小程序使用阿里图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。