uniapp使用iconfont图标全图片演示保姆级教程

去找了很多文章 都引用失败了 忍不住记录一下

本作者因为技术有限，也是第一次写文章, 不对以下的代码操作做任何原理性的分析，只告诉大家如何实现这样的效果

如果觉得写不好 还请轻点喷

首先我们需要打开iconfont网站里面去找我们需要的图标

网址iconfont-阿里巴巴矢量图标库
在里面直接搜索直接想要的图标就好

 找到想要的直接入库就好  然后右上角就可以看到直接入库的图标 注意是收藏上面的购物车图标

 然后添加到项目  因为我们做项目一般不会只用到一个图标  所以添加一个项目 方便管理和一次性下载 没有项目就直接新建一个就好

 随后在资源管理里面就可以找到自己的图标项目

 然后下载

 将下载好后的文件解压 就可以看到如下的文件目录  当前时间是23年7月 肯定跟之前不一样

 然后将红色的框里面的文件复制或者移动到uniapp项目下的static目录里面 最好新建一个文件方便管理 如图

然后再将紫色框里的文件iconfont.css复制或移动到根目录下的任意新文件夹中  这里也是方便区分 我在根目录下新建了一个common文件夹 然后放在这里面

 随后我们打开iconfont.css文件 修改里面的代码

 随后我们就在需要只用的页面导入使用就好  我这里演示局部导入  全部导入只需要在app.vue中输入一样的代码就好

 

 上图中图标的代码就在iconfont网站之前的 我的项目 中

 最后保存编译就可以看到直接选择的图标了 我这里用的是垃圾桶