Symbol 引用 iconfont icon圖示庫

Shu_HowZ發表於2024-05-25
Symbol

Symbol 引用 iconfont icon圖示庫

Symbol 引用

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

  • 支援多色圖示了，不再受單色限制。
  • 透過一些技巧，支援像字型那樣，透過 font-size, color 來調整樣式。
  • 相容性較差，支援 IE9+，及現代瀏覽器。
  • 瀏覽器渲染 SVG 的效能一般，還不如 png。

使用步驟如下：

第一步：引入程式碼

引入專案下面生成的 symbol 程式碼（iconfont.js)

1 <script src="./iconfont.js"></script>

第二步：加入通用 CSS 程式碼

引入一次就行~

1 <style>
2 .icon {
3   width: 1em;
4   height: 1em;
5   vertical-align: -0.15em;
6   fill: currentColor;
7   overflow: hidden;
8 }
9 </style>

第三步：挑選圖示,獲取類名

挑選相應圖示並獲取類名，應用於頁面

1 <svg class="icon" aria-hidden="true">
2   <use xlink:href="#icon-xxx"></use>
3 </svg>

圖示如何獲取

一個神奇的網站

iconfont-阿里巴巴向量圖示庫（純免費）！

點選進入 iconfont-阿里巴巴向量圖示庫

如何操作

第一步：註冊登入

就不用多講了~

第二步：搜尋圖示，加入購物車

可以搜尋自己想要的圖示，然後加入購物車。

第三步：購物車下載

第四步：下載完成後解壓

下載完成後 解壓 ，得到一個資料夾，裡面內容如下：

第五步：引入iconfont.js

先把 iconfont.js 上傳到部落格檔案中，然後按照開頭引入iconfont.js。（注意路徑）

第六步：引入css程式碼

按照使用步驟 第二步，將css程式碼引入，引入一次就好，後續無需再次引用。

第七步：獲取圖示類名

開啟 第四步 截圖中的 demo_index.html，獲取圖示類名

第八步：新增圖示

以上圖為例，則程式碼如下所示：

1 <svg class="icon" aria-hidden="true">
2     <use xlink:href="#icon-fzst-ping"></use>
3 </svg>

最後，看看效果

學會了嗎？快去試試吧~

相關文章