对于只有一个ui的当然可以直接从阿里巴巴ui库上把UI直接下载下来使用

可是对于比较多的ui使用,我还是推荐用UI的字体引用来使用,这样方便灵活,可以更加便捷地修改icon的颜色和大小

首先进入阿里巴巴ui库,找到想要的ui,加入购物车
微信小程序——使用阿里巴巴UI字体库
收集完自己想要的UI后点击右上角的购物车按钮
微信小程序——使用阿里巴巴UI字体库

弹出这个,然后可以新建一个项目名,把收集到的UI放入这个项目中
微信小程序——使用阿里巴巴UI字体库
然后跳转到了我的项目的网页,点击下载字体库到本地:
微信小程序——使用阿里巴巴UI字体库

下载完是一个压缩包,解压打开,我们只需要iconfont.css文件
微信小程序——使用阿里巴巴UI字体库

把它放入小程序目录里面,在这里我新建了个文件夹myFont,把iconfont.css放入里面,记得要把iconfont.css改名为iconfont.wxss,然后在app.wxss里面引入iconfont.wxss
微信小程序——使用阿里巴巴UI字体库

这个时候就安装成功了

使用

我的项目中,点击编辑icon,可以查看其Unicode的十六进制码,复制下来
微信小程序——使用阿里巴巴UI字体库
微信小程序——使用阿里巴巴UI字体库
然后,在HTML中,要使用阿里巴巴UI字体的必须要加上iconfont这个class类(也可以在iconfont.wxss里面自定义类的名字)
微信小程序——使用阿里巴巴UI字体库

wxss:
微信小程序——使用阿里巴巴UI字体库

效果展示:
微信小程序——使用阿里巴巴UI字体库
因为是字体,所以可以很方便地修改颜色和大小:
微信小程序——使用阿里巴巴UI字体库
微信小程序——使用阿里巴巴UI字体库

相关文章:

  • 2021-08-24
  • 2021-09-13
  • 2021-12-21
  • 2022-02-07
  • 2021-08-10
  • 2022-02-07
  • 2021-12-28
  • 2021-07-18
猜你喜欢
  • 2021-12-31
  • 2021-04-05
  • 2022-01-16
  • 2021-11-26
  • 2021-12-31
  • 2022-12-23
  • 2022-02-07
相关资源
相似解决方案