首頁  >  文章  >  web前端  >  vue使用自訂icon圖示步驟解析

vue使用自訂icon圖示步驟解析

php中世界最好的语言
php中世界最好的语言原創
2018-05-21 14:43:483415瀏覽

這次帶給大家vue使用自訂icon圖示步驟解析,vue使用自訂icon圖示的注意事項有哪些,以下就是實戰案例,一起來看一下。

首先因為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的集合,與另外兩種相比具有如下特點:

  • 支持多色圖示了,不再受單色限制。

  • 透過一些技巧,支援像字體那樣,透過 <a href="http://www.php.cn/wiki/807.html" target="_blank">font-size</a> , color 來調整樣式。

  • 相容性較差,支援 ie9 ,及現代瀏覽器。

  • 瀏覽器渲染svg的效能一般,不如png。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

WebPack設定vue多頁面步驟詳解

#修改node.js預設npm安裝目錄步驟詳解

#

以上是vue使用自訂icon圖示步驟解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn