vant自定義引入iconfont圖標(biāo)及字體的方法步驟
因為vantUI給的圖標(biāo)非常少,為了滿足自己的需求,必須自定義圖標(biāo),這里分享一種vant引入阿里的iconfont矢量圖庫中的圖標(biāo)的方法
第一步:去阿里矢量庫下載圖標(biāo)
點擊資源管理—>我的項目 —>新建項目
在首頁搜索需要的圖標(biāo)添加至自己的項目中
第二步:把項目下載到本地,解壓
然后把 iconfont.css
復(fù)制到項目的 assets/css
文件夾中(并且修改代碼路徑),iconfont.ttf,iconfont.woff,iconfont.woff2放到新建的fonts文件夾中。并且在main.js中引入
?。。?! 修改 iconfont.css里面的路徑( 全部要改,這里只是展示改完和未改的區(qū)別 )
第三步:使用(只需要到 iconfont.css中找到你需要的圖標(biāo)class名復(fù)制!?。∫獜?fù)制iconfont和你需要的圖標(biāo) )在main.js中引入
import './assets/css/common/iconfont.css'
<div> <i class="iconfont wticon-riqi"></i> </div>
圖標(biāo)已展示
?。。∽詈笳f兩句,每次在項目里面新添加圖標(biāo),項目包下載下來記得替換 iconfont.css ,iconfont.ttf,iconfont.woff,iconfont.woff2這三個文件,修改 iconfont.css里面的路徑 以上的
以上的方法出現(xiàn)在瀏覽器上圖標(biāo)是黑色的,如果需要彩色的圖標(biāo)
在main.js中導(dǎo)入iconfont.js文件
import './assets/js/iconfont.js'
代碼方式不能是span,div,i等標(biāo)簽,而是有專屬的標(biāo)簽
<div> //黑白色的圖標(biāo) <i class="iconfont wticon-riqi"></i> //彩色的圖標(biāo) //svg下的class名是iconfont,use下的class名是#+圖標(biāo)名 <svg class="iconfont"> <use xlink:href="#wticon-riqi" rel="external nofollow" ></use> </svg> </div>
在vant組件中使用圖標(biāo)
替換vant圖庫中的圖標(biāo),需要用到插槽
原本寫法
<van-form @submit="onSubmit"> <van-field v-model="username" left-icon="smile-o" name="用戶名" placeholder="用戶名" :rules="[{ required: true, message: '請?zhí)顚懯謾C號' }]" /> <van-field v-model="password" name="密碼" placeholder="密碼" :rules="[{ required: true, message: '請?zhí)顚戲炞C碼' }]" /> <div style="margin: 16px"> <van-button block type="info" native-type="submit">提交</van-button> </div> </van-form>
添加圖標(biāo)插槽的寫法
<van-form @submit="onSubmit"> <van-field v-model="username" left-icon="smile-o" name="用戶名" placeholder="用戶名" :rules="[{ required: true, message: '請?zhí)顚懯謾C號' }]" > <i slot="left-icon" class="toutiao toutiao-shouji"></i> </van-field> <van-field v-model="password" name="密碼" placeholder="密碼" :rules="[{ required: true, message: '請?zhí)顚戲炞C碼' }]" > <i slot="left-icon" class="toutiao toutiao-jiesuo"></i> </van-field> <div style="margin: 16px"> <van-button block type="info" native-type="submit">提交</van-button> </div> </van-form>
總結(jié)
到此這篇關(guān)于vant自定義引入iconfont圖標(biāo)及字體的文章就介紹到這了,更多相關(guān)vant引入iconfont圖標(biāo)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue + Element UI 實現(xiàn)權(quán)限管理系統(tǒng)之菜單功能實現(xiàn)代碼
菜單管理是一個對菜單樹結(jié)構(gòu)的增刪改查操作,這篇文章主要介紹了Vue + Element UI 實現(xiàn)權(quán)限管理系統(tǒng)之菜單功能實現(xiàn)代碼,需要的朋友可以參考下2022-02-02Vue 2源碼解析HTMLParserOptions.start函數(shù)方法
這篇文章主要為大家介紹了Vue 2源碼解析HTMLParserOptions.start函數(shù)方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08Vue聲明式導(dǎo)航與編程式導(dǎo)航及導(dǎo)航守衛(wèi)和axios攔截器全面詳細(xì)講解
這篇文章主要介紹了Vue聲明式導(dǎo)航與編程式導(dǎo)航及導(dǎo)航守衛(wèi)和axios攔截器,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01