微信小程序引入阿里巴巴iconfont图标并使用

介绍

在小程序里,使用阿里巴巴的图标,如下所示:
微信小程序引入阿里巴巴iconfont图标并使用_第1张图片

使用方式

  1. 搜索自己需要的图标,然后将需要用到的图标加入购物车,如下图所示:
    微信小程序引入阿里巴巴iconfont图标并使用_第2张图片
  2. 去右上角,点击购物车按钮;这里第一次使用,会有三个提示,选择 添加至项目 即可。 然后选择新增按钮,新建项目名字。如下所示:
    微信小程序引入阿里巴巴iconfont图标并使用_第3张图片
  3. 跳转到项目页面,选择 下载至本地,如下所示:
    微信小程序引入阿里巴巴iconfont图标并使用_第4张图片
  4. 将下载后的压缩包,解压缩,然后将名为iconfont.css 的文件改名为 iconfont.wxss,再在小程序的项目里新增名为style 的文件夹,并在文件夹下,新增名为 iconfont 的文件夹,并将压缩包里的所有文件复制到该文件夹下。如下所示:
    微信小程序引入阿里巴巴iconfont图标并使用_第5张图片
  5. 点击阿里巴巴项目里的 unicode选项,点击下面的生成代码,然后复制代码,将该代码复制到项目里, iconfont.wxss配置中,进行替换,如下所示
    微信小程序引入阿里巴巴iconfont图标并使用_第6张图片
    微信小程序引入阿里巴巴iconfont图标并使用_第7张图片
  6. app.wxss 中,导入刚刚的文件,如下所示
    微信小程序引入阿里巴巴iconfont图标并使用_第8张图片
  7. 然后就可以在页面进行使用,使用方式如下所示,加上对应的icon名称即可
<text class="iconfont icon-xihuan"></text>

你可能感兴趣的:(微信小程序,微信小程序,小程序)