阿里图标的引入使用即灵活修改大小颜色

网址 iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/

1.进入注册登录一波，有目标直接搜索不要盲找

 

 2.把所有用的添加至购物车点击需要图标上的，点击导航条的购物车图标

 3.这次用的全选完点击导航购物车后出现该界面

   后有三种使用方式，最好加到项目可以复用绿色框那个，

 

4.选择添加项目后，跳转到项目，此时想改可以直接点编辑小笔的图标改，不建议后边改代码更灵活

 

 5.点击下载代码，会下载这个项目所有图标的一些代码.zip

 6.解压之并找到

7.把这个解压好的内容放到assets目录下

 

 8.在要使用的地方.vue文件 引入 或全局引入main.js

//引入iconfont.css文件，在刚刚添加的assset/iconfont下，不同文件相对路径不同
import "路径地址/iconfont.css"

9.在hml中使用

 回到项目中找到用的单个图标复制他的代码

例如： icon-add

html中使用夹在class的iconfont后

      <i class="iconfont icon-add menuic"></i>
       //icon-add是刚刚复制的，menuic是自定义的一个class也生效

10.修改样式颜色大小

全部vue项目中都改变找到控制的css文件，目录如红框

  单独的某个vue文件生效在其中改<style scopd></style>中添加 .iconfont样式，可以直接从公共文  件css复制过来

 如果要单独改某个文件中的某一个可以为其单独定义class,样式在该文件的总样式下

   <i class="iconfont icon-add menuic"></i>
       //icon-add是刚刚复制的，menuic是自定义的一个class也生效

单独改这个可以
.menuic{
样式
}

 参考

阿里矢量图标在vue项目中线上或本地引入以及颜色大小的调整_sing__star的博客-CSDN博客