vue使用自定義icon圖標的方法
首先因為elementUI提供的icon太少了，所有自己找找有沒有矢量圖可以補充的，嘗試多種方法，覺得下面方法簡單易懂，分享給大家
效果圖：
推薦使用阿里爸爸矢量圖標管理，iconfont
使用方法 登錄賬號，找到需要的圖標加入購物車
然后添加到項目
再然后下載代碼到本地
下載代碼文件然后解壓出現(xiàn)這列表
打開HTML文件，引用方法教程
補充我人的坑，之前想著在style標簽里@import ""，結(jié)果一直報錯，試了很多方法還是沒效果，把問題想復雜了
第一步：在index.html引入fontclass代碼：
<link rel="stylesheet" type="text/css" href="./iconfont.css" rel="external nofollow" >
第二步：挑選相應圖標并獲取類名，應用于頁面：
<i class="iconfont icon-xxx"></i>
特點：
兼容性良好，支持ie8+，及所有現(xiàn)代瀏覽器。
相比于unicode語意明確，書寫更直觀?？梢院苋菀追直孢@個icon是什么。
因為使用class來定義圖標，所以當要替換圖標時，只需要修改class里面的unicode引用。
不過因為本質(zhì)上還是使用的字體，所以多色圖標還是不支持的。
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>
第三步：挑選相應圖標并獲取類名，應用于頁面：
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx" rel="external nofollow" > </use> </svg>
這是一種全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法。相關(guān)介紹可以參考這篇文章 這種用法其實是做了一個svg的集合，與另外兩種相比具有如下特點：
- 支持多色圖標了，不再受單色限制。
- 通過一些技巧，支持像字體那樣，通過
font-size,color來調(diào)整樣式。 - 兼容性較差，支持 ie9+,及現(xiàn)代瀏覽器。
- 瀏覽器渲染svg的性能一般，還不如png。
總結(jié)
以上所述是小編給大家介紹的vue使用自定義的icon圖標的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
本篇文章主要介紹了詳解使用vue腳手架工具搭建vue-webpack項目，非常具有實用價值，需要的朋友可以參考下2017-05-05
vue中nextTick函數(shù)和react類似實現(xiàn)代碼
Vue 3 中的 nextTick 主要通過 Promise 實現(xiàn)異步調(diào)度,返回一個 Promise 對象,這篇文章主要介紹了vue中nextTick函數(shù)和react類似實現(xiàn)代碼,需要的朋友可以參考下2024-04-04
Vue整合Node.js直連Mysql數(shù)據(jù)庫進行CURD操作過程詳解
這篇文章主要給大家分享Vue整合Node.js，直連Mysql數(shù)據(jù)庫進行CURD操作的詳細過程，文中有詳細的代碼講解，具有一定的參考價值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue3渲染函數(shù)(h函數(shù))的變化,文中給大家介紹了h函數(shù)的三個參數(shù)詳細說明及vue3 h函數(shù)-綁定事件，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
這篇文章主要給大家介紹了關(guān)于Vue動態(tài)改變css樣式的3種方法,在Vue.js中我們經(jīng)常需要根據(jù)特定的條件或事件來動態(tài)地修改CSS樣式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
Vue提供自定義實現(xiàn)指令的功能, 和組件類似,可以是全局指令和局部指令,這篇文章主要介紹了vue自定義tap指令及tap事件的實現(xiàn) ,需要的朋友可以參考下2018-09-09
vue+django實現(xiàn)一對一聊天功能的實例代碼
這篇文章主要介紹了vue+django實現(xiàn)一對一聊天功能,主要是通過websocket，由于Django不支持websocket，所以我使用了django-channels。，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2019-07-07
在實際開發(fā)中,我們經(jīng)常會遇到將Vue項目部署到Tomcat服務器上的需求,下面這篇文章主要給大家介紹了關(guān)于tomcat部署前端vue項目(項目上線具體操作)的相關(guān)資料,需要的朋友可以參考下2024-07-07
在本篇文章里小編給各位整理的是一篇關(guān)于vue數(shù)據(jù)響應式原理知識點總結(jié)，有興趣的朋友們可以跟著學習下。2020-02-02
這篇文章主要介紹了淺談vue-router 路由傳參的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12