首先因為elementUI提供的icon太少了，所有自己找找有沒有矢量圖可以補充的，嘗試多種方法，覺得下面方法簡單易懂，分享給大家

創新互聯專注于休寧縣網站建設服務及定制，我們擁有豐富的企業做網站經驗。 熱誠為您提供休寧縣營銷型網站建設，休寧縣網站制作、休寧縣網頁設計、休寧縣網站官網定制、小程序定制開發服務，打造休寧縣網絡公司原創品牌,更為您提供休寧縣網站排名全網營銷落地服務。

效果圖：

推薦使用阿里爸爸矢量圖標管理，iconfont

使用方法 登錄賬號，找到需要的圖標加入購物車

然后添加到項目 

再然后下載代碼到本地

下載代碼文件然后解壓出現這列表

打開HTML文件，引用方法教程

補充我人的坑，之前想著在style標簽里@import ""，結果一直報錯，試了很多方法還是沒效果，把問題想復雜了

第一步：在index.html引入fontclass代碼：

<link rel="stylesheet" type="text/css" href="./iconfont.css" rel="external nofollow" >

第二步：挑選相應圖標并獲取類名，應用于頁面：

<i class="iconfont icon-xxx"></i>

特點：

兼容性良好，支持ie8+，及所有現代瀏覽器。

相比于unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什么。

因為使用class來定義圖標，所以當要替換圖標時，只需要修改class里面的unicode引用。

不過因為本質上還是使用的字體，所以多色圖標還是不支持的。

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>

這是一種全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了一個svg的集合，與另外兩種相比具有如下特點：

• 支持多色圖標了，不再受單色限制。
• 通過一些技巧，支持像字體那樣，通過 font-size , color 來調整樣式。
• 兼容性較差，支持 ie9+,及現代瀏覽器。
• 瀏覽器渲染svg的性能一般，還不如png。

總結

以上所述是小編給大家介紹的vue使用自定義的icon圖標的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創新互聯網站的支持！

文章標題：vue使用自定義icon圖標的方法
網站路徑：http://vcdvsql.cn/article24/podhce.html

成都網站建設公司_創新互聯，為您提供定制網站、企業建站、域名注冊、用戶體驗、軟件開發、響應式網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯