MUI框架-14-使用自定義icon圖示、引入阿里巴巴向量圖示

肖朋偉發表於2018-11-12

MUI框架-14-使用自定義icon圖示、引入阿里巴巴向量圖示

首先介紹介紹一下,前端必備的非常強大的 阿里巴巴向量圖示庫:地址是:http://www.iconfont.cn/
這裡有豐富,精美,且免費使用的向量圖示

MUI框架-14-使用自定義icon圖示、引入阿里巴巴向量圖示

怎麼應用到自己的專案中呢?

方法一:直接下載,png 格式的圖示

提示:可以自選顏色,截圖:

MUI框架-14-使用自定義icon圖示、引入阿里巴巴向量圖示

方法二:下載程式碼

1.先將想要使用的圖示加入購物車

在這裡插入圖片描述

2.開啟購物車,點選下載程式碼:

MUI框架-14-使用自定義icon圖示、引入阿里巴巴向量圖示

3.下載後是一個壓縮包,解壓後就可以得到一堆東西:

MUI框架-14-使用自定義icon圖示、引入阿里巴巴向量圖示

4.這裡面有 3 個html 檔案,是說明三種常用的使用方法

5.建議使用:symbol 的那個方法
【注意】:
1.只需要引入 js 檔案到專案中。
2.需要自己替換 HTML 程式碼中的 icon-xxx 為最上面該圖示的名字,截圖:

在這裡插入圖片描述

等等,三種方式,大家可以根據自己的需要選擇,具體使用檢視,下載程式碼的 html 檔案的詳細描述

【注意】:自己替換 HTML 程式碼中的 xxx 為最上面該圖示的名字

相關文章