在 uniapp 中使用阿里图标

152 阅读1分钟

前言

在使用 uniapp 开发项目的过程中,图标的使用可以说是日常操作,甚至百分之八十的页面都会用到,而如果使用了 ui 框架的话,框架里面本身也会自带图标,不过这些图标很难满足需求,以下则是阿里图标的使用。

寻找需要的图标

image.png

  • 将需要用的图标加入购物车或者收藏起来
  • 点击右上角的购物车图标,将已经选择的图标添加至项目
  • 这里需要登录,大家可以自行百度

下载至本地

image.png 下载到本地后

image.png

  • 可以点击 demo_index.html 查看,里面有使用方法。

页面中使用

将已经下载好的文件里全部拷贝到项目里,推荐放到文件夹 static/style/iconfont 下,大家可以全部拷贝,也可以只拷贝 iconfont.css 和 iconfont.ttf 两个文件

创建本地css文件

static/style/iconfont 文件下创建iconfont.css文件,这是为了配置和引用阿里的图标,代码如下: 把iconfont.css里的内容复制到此文件内,复制 .iconfont 下面的样式即可,上面的引入不用复制。 可能有部分小伙伴搜索到的需要加 https ,但是现在官方已经做处理,所以不用,如果不能访问大家最后再加。

image.png

app.vue中引入

image.png

页面使用

image.png

导航栏里使用

image.png

小结

百度上的方法很多,合适就行