
因此最近梅干個人比較偏愛,可下載SVG格式的圖示平台,就可將喜歡的圖示以SVG的方式載入到網頁中,雖然SVG本身是用向量的方式去記錄圖示的路徑,但每個SVG在標籤設定上有些不一樣,而最近梅干發現IcoFonti這平台裡面提供了2100+的高質感圖示,同時還可下載SVG檔案格式,由於它的標籤有些不同,因此只要稍作調整,就能在網頁中的CSS來調整圖示的大小與顏色,因此身為網設的你,也趕快來看看囉!
IcoFont
連結網址:https://icofont.com/
Step1
當進入IcoFont這平台後,可由左邊來篩選圖示的類型。

Step2
當篩選完畢後,也可再透過關鍵字的方式,進行搜尋。

Step3
點選圖示後,除了可用一般的方式,將它載入外,也可下載SVG格式。

Step4
下載完畢後,檢視原始碼,再把path中的碼全部複製起來。

Step5
再把它貼到SVG的標籤中。

Step6
由於它預設的寬高為1000,所以這時的圖示會超大一顆的。

Step7
接著就可用css的width 來設定圖示的大小。

Step8
當要修改顏色的話,可在path加入fill="currentColor"後,就可在CSS樣式中以color的方式,來改變圖示的顏色,這樣使用是不是超方便的呀!

Step9
說明

#範例預覽