1. 首頁
  2. »
  3. 免費
  4. »
  5. IcoFont 免費2100+高質感的SVG圖示下載與使用教學

IcoFont 免費2100+高質感的SVG圖示下載與使用教學

2021/10/20

梅問題-IcoFont 免費2100+高質感的SVG圖示下載與使用教學
  網頁圖示永遠不嫌多,雖然說每個圖示平台,裡面的圖示都相當的多元且豐富,但有時一定會遇到,當要某個圖示,正巧所載入的圖示沒有時,就得再尋找其它的圖示模組,因此就得再載入其它的圖示模組,而可別小看這些圖示模組的檔案大小,有時東載一個西載一個,就會造成網頁肥胖與載入速度緩慢的原因。

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


IcoFont
連結網址:https://icofont.com/

Step1
當進入IcoFont這平台後,可由左邊來篩選圖示的類型。
梅問題-IcoFont 免費2100+高質感的SVG圖示下載與使用教學
Step2
當篩選完畢後,也可再透過關鍵字的方式,進行搜尋。
梅問題-IcoFont 免費2100+高質感的SVG圖示下載與使用教學
Step3
點選圖示後,除了可用一般的方式,將它載入外,也可下載SVG格式。
梅問題-IcoFont 免費2100+高質感的SVG圖示下載與使用教學
Step4
下載完畢後,檢視原始碼,再把path中的碼全部複製起來。
梅問題-IcoFont 免費2100+高質感的SVG圖示下載與使用教學
Step5
再把它貼到SVG的標籤中。
梅問題-IcoFont 免費2100+高質感的SVG圖示下載與使用教學
Step6
由於它預設的寬高為1000,所以這時的圖示會超大一顆的。
梅問題-IcoFont 免費2100+高質感的SVG圖示下載與使用教學
Step7
接著就可用css的width 來設定圖示的大小。
梅問題-IcoFont 免費2100+高質感的SVG圖示下載與使用教學
Step8
當要修改顏色的話,可在path加入fill="currentColor"後,就可在CSS樣式中以color的方式,來改變圖示的顏色,這樣使用是不是超方便的呀!
梅問題-IcoFont 免費2100+高質感的SVG圖示下載與使用教學
Step9
說明
梅問題-IcoFont 免費2100+高質感的SVG圖示下載與使用教學
#範例預覽