阿里巴巴矢量圖標庫在網頁設計中的應用

前言：想要寫出一篇引人入勝的文章？我們特意為您整理了阿里巴巴矢量圖標庫在網頁設計中的應用范文，希望能給你帶來靈感和參考，敬請閱讀。

【摘要】當今眾多的Web前端設計都采用了阿里巴巴矢量圖標庫來制作網頁中的小圖標，圖標庫是開放的，可以在線或下載使用。而這一技術在很多《網頁設計》教材中未曾提及，本文就來介紹一下阿里巴巴矢量圖標庫的使用方法，作為對《網頁設計》課程教學內容的一個補充。

【關鍵詞】矢量圖標；web前端；網頁設計

1引言

阿里巴巴公司推出的Webfont形式的矢量圖標庫網站，其中涵蓋了1006860多個常用圖標并且還在持續更新中。Iconfont平臺為用戶提供圖標分撿下載、矢量格式轉換、在線圖標搜索、在線儲存、個人圖標庫管理及項目圖標管理等基礎功能。網頁中引入的圖標是作為字體形式插入，可以自由修改顏色，自由變換大小，也可以添加透明度、陰影、旋轉等視覺效果，并且在布局方面也非常方便。

2矢量圖標的下載

進入官方網站后，在搜索框中輸入搜索關鍵字進行搜索，比如輸入：“魚”，就會出現代表“魚”的圖標，這個圖標會有很多，有黑白色的也有彩色的，我們都可以選擇使用。當我們需要下載多個小圖標時，可將選好的圖標統一加入購物車，加入好購物車以后點擊下載代碼即可，此時需要我們登錄。網站提供了3種登錄方式，其中阿里域帳號是內部管理帳號，可以使用新浪微博帳號和Gthub帳號登錄。

3unicode方式調用矢量圖標

按照下載文件中demo_unicode.html頁面內容的提示進行調用。例如調用美女和魚圖標（圖1），我們書寫的HTML代碼是：<iclass="iconfontmeinv">&#xe605;</i><br/><iclass="iconfont">&#xe6b4;</i>調用后，運行結果如圖2給class為meinv的圖標書寫以下樣式，運行后效果如圖3.meinv{font-size:100px;font-style:italic;color:orange;border:1pxsolidblue;unicode是字體在網頁端最原始的應用方式，它的特點是兼容所有的瀏覽器，支持ie6+；支持按字體的方式去動態調整圖標大小，顏色等等；不支持多色圖標。

4fontclass方式調用矢量圖標

按照下載文件中demo_fontclass.html頁面內容的提示進行調用。例如調用購物車和魚圖標（圖4），我們書寫的HTML代碼是：<iclass="iconfonticon-gouwuche"></i><br/><iclass="iconfonticon-yu2"></i>調用后font-class是unicode使用方式的一種變種，主要是解決u－nicode書寫不直觀，語意不明確的問題。與unicode使用方式相比，具有如下特點：兼容性良好，支持ie8+，及所有現代瀏覽器。相比于uni－code語意明確，書寫更直觀。可以很容易分辨這個icon是什么。因為使用class來定義圖標，所以當要替換圖標時，只需要修改class里面的unicode引用。不過因為本質上還是使用的字體，所以多色圖標還是不支持的。

5symbol方式調用矢量圖標

按照下載文件中demo_symbol.html頁面內容的提示進行調用。例如調用購物車和魚圖標（圖6），我們書寫的HTML代碼是：<svgclass="icon"aria-hidden="true""><usexlink:href="http://#icon-gouwuche"></use></svg><svgclass="icon"aria-hidden="true""><usexlink:href="http://#icon-yu"></use></svg>調用后，運行結果如圖7，如果需要增加樣式，則樣式代碼作用在<svg></svg>標簽上。symbol是一種全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法。這種用法其實是做了一個svg的集合，與另外兩種相比具有如下特點：支持多色圖標了，不再受單色限制。通過一些技巧，支持像字體那樣，通過font-size,color來調整樣式。兼容性較差，支持ie9+,及現代瀏覽器。瀏覽器渲染svg的性能一般，還不如png。總結：雖然現在有了iconfont資源庫，但它還不是萬能的，畢竟它不能100%滿足我們的需求，有時候我們需要一些特別icon圖標，就需要我們自己制作了。目前我們在Web前端工作中最需要了解的是svg格式的圖標，一些門戶網站已經開始運用到了這個技術。同時通過文本的介紹，希望將此技術加入到《網頁設計》授課內容中。

參考文獻：

［1］吳恩華;圖形處理器用于通用計算的技術、現狀及其挑戰［J］;軟件學報;2004年10期

［2］黃晶慧;顏色與點圖標方法的可視化［J］;《電腦知識與技術》;2015(1):153-156

作者:李可 單位:寧波職業技術學院