阿里字體圖標官網:http://iconfont.cn/
1.首先在阿里字體圖標官網將需要使用的圖標加入購物車,並按下圖中的操作下載到本地
2.在支付寶小程序的根目錄新建static/ali-icon
3.將下載下來的字體壓縮文件解壓,解壓後的文件內容如下
4.將文件夾中的iconfont.css名稱改成stylesheet.acss;
5.將iconfont.ttf和改完名的stylesheet.acss拷貝到小程序項目內的static/ali-icon文件夾下;
6.在static/ali-icon文件夾下新建iconfont.acss文件,內容如下
@import "/static/ali-icon/stylesheet.acss";
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('/static/ali-icon/iconfont.ttf') format('truetype'), /* 使用的ttf,所以這裏的路徑不能出錯了 */
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';}
7.在app.acss文件中引入iconfont.acss
/* 阿里圖標樣式*/
@import "/static/ali-icon/iconfont.acss";
8.在index.axml中使用iconfont
<text class="iconfont icon-creditcard"></text>