vue使用自定義icon圖標(biāo)的方法
首先因?yàn)閑lementUI提供的icon太少了，所有自己找找有沒(méi)有矢量圖可以補(bǔ)充的，嘗試多種方法，覺(jué)得下面方法簡(jiǎn)單易懂，分享給大家
效果圖：
推薦使用阿里爸爸矢量圖標(biāo)管理，iconfont
使用方法 登錄賬號(hào)，找到需要的圖標(biāo)加入購(gòu)物車(chē)
然后添加到項(xiàng)目
再然后下載代碼到本地
下載代碼文件然后解壓出現(xiàn)這列表
打開(kāi)HTML文件，引用方法教程
補(bǔ)充我人的坑，之前想著在style標(biāo)簽里@import ""，結(jié)果一直報(bào)錯(cuò)，試了很多方法還是沒(méi)效果，把問(wèn)題想復(fù)雜了
第一步：在index.html引入fontclass代碼：
<link rel="stylesheet" type="text/css" href="./iconfont.css" rel="external nofollow" >
第二步：挑選相應(yīng)圖標(biāo)并獲取類(lèi)名，應(yīng)用于頁(yè)面：
<i class="iconfont icon-xxx"></i>
特點(diǎn)：
兼容性良好，支持ie8+，及所有現(xiàn)代瀏覽器。
相比于unicode語(yǔ)意明確，書(shū)寫(xiě)更直觀?？梢院苋菀追直孢@個(gè)icon是什么。
因?yàn)槭褂胏lass來(lái)定義圖標(biāo)，所以當(dāng)要替換圖標(biāo)時(shí)，只需要修改class里面的unicode引用。
不過(guò)因?yàn)楸举|(zhì)上還是使用的字體，所以多色圖標(biāo)還是不支持的。
symbol引用 第一步：html引入symbol代碼：
<script src="./iconfont.js"></script>
第二步：加入通用css代碼（引入一次就行）：
<style type="text/css">.icon
{
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;}</style>
第三步：挑選相應(yīng)圖標(biāo)并獲取類(lèi)名，應(yīng)用于頁(yè)面：
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx" rel="external nofollow" > </use> </svg>
這是一種全新的使用方式，應(yīng)該說(shuō)這才是未來(lái)的主流，也是平臺(tái)目前推薦的用法。相關(guān)介紹可以參考這篇文章 這種用法其實(shí)是做了一個(gè)svg的集合，與另外兩種相比具有如下特點(diǎn)：
- 支持多色圖標(biāo)了，不再受單色限制。
- 通過(guò)一些技巧，支持像字體那樣，通過(guò)
font-size,color來(lái)調(diào)整樣式。 - 兼容性較差，支持 ie9+,及現(xiàn)代瀏覽器。
- 瀏覽器渲染svg的性能一般，還不如png。
總結(jié)
以上所述是小編給大家介紹的vue使用自定義的icon圖標(biāo)的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue頁(yè)面設(shè)置滾動(dòng)失敗的完美解決方案(scrollTop一直為0)
這篇文章主要介紹了vue頁(yè)面設(shè)置滾動(dòng)失敗的解決方案(scrollTop一直為0),本文通過(guò)場(chǎng)景分析實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
Vue?watch中監(jiān)聽(tīng)值的變化,判斷后修改值方式
這篇文章主要介紹了Vue?watch中監(jiān)聽(tīng)值的變化,判斷后修改值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue?Electron實(shí)現(xiàn)輸入法自動(dòng)刷字?jǐn)?shù)功能詳解
這篇文章主要介紹了Vue?Electron實(shí)現(xiàn)輸入法自動(dòng)刷字?jǐn)?shù)功能，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)C#有一定的幫助，感興趣的小伙伴可以跟隨小編一起了解一下2022-12-12
這篇文章主要為大家介紹了Iframe在Vue中的狀態(tài)保持技術(shù)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
解決vue-router 嵌套路由沒(méi)反應(yīng)的問(wèn)題
這篇文章主要介紹了解決vue-router 嵌套路由沒(méi)反應(yīng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue.js通過(guò)自定義指令實(shí)現(xiàn)數(shù)據(jù)拉取更新的實(shí)現(xiàn)方法
數(shù)據(jù)拉取更新這個(gè)功能相信大家基本都見(jiàn)過(guò)，但是如果要做起來(lái)卻不止如何做起，所以這篇文章給大家分享了vue.js通過(guò)自定義指令實(shí)現(xiàn)的方法，閱讀本文需要對(duì)vue有一定理解，有需要的朋友們下面來(lái)一起看看吧。2016-10-10
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。這篇文章主要給大家介紹了vue項(xiàng)目中使用axios上傳圖片等文件操作，需要的朋友參考下吧2017-11-11
父子組件通訊是指在前端開(kāi)發(fā)的組件化架構(gòu)中,父組件與子組件之間互相傳遞數(shù)據(jù)和觸發(fā)功能的一種機(jī)制,這種機(jī)制使得組件能夠保持獨(dú)立性的同時(shí),也能協(xié)同工作,本文給大家介紹了Vue父子組件通訊的四種方法,需要的朋友可以參考下2024-07-07
Vue3中的h方法用于創(chuàng)建虛擬DOM節(jié)點(diǎn),是渲染函數(shù)的核心,它接受三個(gè)參數(shù)：type（節(jié)點(diǎn)類(lèi)型）、props（屬性對(duì)象）和children（子節(jié)點(diǎn)）,通過(guò)示例展示了如何使用h方法創(chuàng)建簡(jiǎn)單的HTML元素、帶有屬性的元素、嵌套元素和自定義組件,感興趣的朋友一起看看吧2025-03-03
vue2.0 下拉框默認(rèn)標(biāo)題設(shè)置方法
今天小編就為大家分享一篇vue2.0 下拉框默認(rèn)標(biāo)題設(shè)置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08