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