支付宝小程序中使用阿里字体图标

最新推荐文章于 2025-05-28 09:32:24 发布

一捆铁树枝

最新推荐文章于 2025-05-28 09:32:24 发布

阅读量2.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：支付宝小程序文章标签：支付宝小程序阿里字体图标

本文链接：https://blog.youkuaiyun.com/qq_41725450/article/details/85339545

支付宝小程序专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何在支付宝小程序中使用阿里字体图标。步骤包括从官网下载图标、修改文件名、导入样式以及在页面中使用图标。适用于希望提升小程序界面美观度的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

阿里字体图标官网：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>