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

您所在的位置:网站首页 jsp设置字体大小颜色不一样 阿里图标的引入使用即灵活修改大小颜色

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

2024-07-13 04:20| 来源: 网络整理| 查看: 265

网址 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后

//icon-add是刚刚复制的,menuic是自定义的一个class也生效

10.修改样式颜色大小

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

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

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

//icon-add是刚刚复制的,menuic是自定义的一个class也生效 单独改这个可以 .menuic{ 样式 }

 参考

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3