以此官方图标为例
https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=17895
单个添加太慢,打开控制台,输入下面js 并热行,全部选中
Array.from(document.getElementsByClassName("icon-gouwuche1")).forEach(x=>x.click())
从购物车,添加进项目
如上图:
1为项目名,
点3按钮 编辑项目,设置前缀 zt-i3-
点2生成
下载本地,解压,将 复制到项目中 src/assets/css/azt-i3/
修改内容. @font-face 内容替换为 上图按钮2处生成的
iconfont.css 顶部修改
/*按钮2处生成的*/ @font-face {font-family: "azt-i3"; src: url('//at.alicdn.com/t/font_1848252_m9tlhsscnvc.eot'); src: url('//at.alicdn.com/t/font_1848252_m9tlhsscnvc.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_1848252_m9tlhsscnvc.woff2') format('woff2'), url('//at.alicdn.com/t/font_1848252_m9tlhsscnvc.woff') format('woff'), url('//at.alicdn.com/t/font_1848252_m9tlhsscnvc.ttf') format('truetype'), url('//at.alicdn.com/t/font_1848252_m9tlhsscnvc.svg#iconfont') format('svg'); } /*注意名字,样式修改为与vant默认相同*/ .azt-i3 { font-family: "azt-i3" !important; font-size: inherit; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
iconfont.css 底部插入新样式
/*覆盖van原样式*/ .van-icon { position: relative; display: inline-block; font: normal normal normal 14px/1 vant-icon,azt-i1,azt-i2,azt-i3; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; } /*tabbar-item 需要的*/ .van-tabbar-item__icon .azt-i3{ display: block; min-width: 1em; }
main.js导入
import "./assets/css/azt-i3/iconfont.css";
好了,现在有两种方式使用新图标了。注意方式2 里的空格,不可省略
恭喜,图标出来了!
van-tabbar-item 一样的使用方式.标准办法,空格办法都可以
<van-tabbar-item icon=" azt-i3-zhixianghuishou">