阿里图标的引入使用即灵活修改大小颜色 | 您所在的位置:网站首页 › icon大小设置 › 阿里图标的引入使用即灵活修改大小颜色 |
网址 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-addhtml中使用夹在class的iconfont后 //icon-add是刚刚复制的,menuic是自定义的一个class也生效10.修改样式颜色大小 全部vue项目中都改变找到控制的css文件,目录如红框 单独的某个vue文件生效在其中改中添加 .iconfont样式,可以直接从公共文 件css复制过来 如果要单独改某个文件中的某一个可以为其单独定义class,样式在该文件的总样式下 //icon-add是刚刚复制的,menuic是自定义的一个class也生效 单独改这个可以 .menuic{ 样式 }参考 阿里矢量图标在vue项目中线上或本地引入以及颜色大小的调整_sing__star的博客-CSDN博客 |
CopyRight 2018-2019 实验室设备网 版权所有 |