前言
在使用 uniapp 开发项目的过程中,图标的使用可以说是日常操作,甚至百分之八十的页面都会用到,而如果使用了 ui 框架的话,框架里面本身也会自带图标,不过这些图标很难满足需求,以下则是阿里图标的使用。
寻找需要的图标
- 将需要用的图标加入购物车或者收藏起来
- 点击右上角的购物车图标,将已经选择的图标添加至项目
- 这里需要登录,大家可以自行百度
下载至本地
下载到本地后
- 可以点击
demo_index.html查看,里面有使用方法。
页面中使用
将已经下载好的文件里全部拷贝到项目里,推荐放到文件夹 static/style/iconfont 下,大家可以全部拷贝,也可以只拷贝 iconfont.css 和 iconfont.ttf 两个文件
创建本地css文件
在 static/style/iconfont 文件下创建iconfont.css文件,这是为了配置和引用阿里的图标,代码如下:
把iconfont.css里的内容复制到此文件内,复制 .iconfont 下面的样式即可,上面的引入不用复制。
可能有部分小伙伴搜索到的需要加 https ,但是现在官方已经做处理,所以不用,如果不能访问大家最后再加。
app.vue中引入
页面使用
导航栏里使用
小结
百度上的方法很多,合适就行