Vant 擴展圖標 自定義圖標，以及兩種使用方式。方式2使用方便

訪問  https://www.iconfont.cn  

 

以此官方圖標為例

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 {

　　font-family:"vant-icon","azt-i1","azt-i2","azt-i3"

}

/*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">