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

本是古典何须时尚 2022-04-01 06:17 806阅读 0赞

阿里字体图标官网：[http://iconfont.cn/][http_iconfont.cn]

1.首先在阿里字体图标官网将需要使用的图标加入购物车，并按下图中的操作下载到本地

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70][]

2.在支付宝小程序的根目录新建static/ali-icon

![20181229152951772.png][]

3.将下载下来的字体压缩文件解压，解压后的文件内容如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 1][]

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

[http_iconfont.cn]: http://iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70]: /images/20220401/96c0bb1a49d44780bc229503a16864ef.png
[20181229152951772.png]: /images/20220401/3e7702ed8b27462b88448df148e4312f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 1]: /images/20220401/891eb4398f434d289ae3a246db66c7cc.png