SVG 轉換 Icon fonts 教學,運用 iconMoon 網頁平台
![SVG 轉換 Icon fonts 教學](https://i0.wp.com/footmark.com.tw/wp-content/uploads/2022/03/4fceb3b8a91c29f4560f8ef4cda63edb.jpg?fit=450%2C236&ssl=1)
Icon fonts 圖片,能讓您在網頁上就像設定文字顏色 color、大小 font-size 一樣的方便,本文將iconMoon 網頁平台,來將 SVG 轉換成 Icon fonts。
儲存 SVG 檔
先將您在 Illustrator 或其它平台,畫好的向量圖存成 .svg 檔案。
iconMoon
開啟 IcoMoon App - Icon Font, SVG, PDF & PNG Generator 平台,來將儲存的向量圖轉成 Icon fonts
匯入 SVG 檔
點擊【Import icons】來多選您要匯入的 SVG 檔。
![iconMoon 匯入 SVG 檔](https://i0.wp.com/footmark.com.tw/wp-content/uploads/2022/02/feb7dbdcff39ffe9ff1ea4bc7b919f08.png?resize=1024%2C509&ssl=1)
iconMoon 匯入四個 SVG 檔完成
![iconMoon 匯入 SVG 檔完成](https://i0.wp.com/footmark.com.tw/wp-content/uploads/2022/02/efa64c6196290a435c1e73b9914e091c.png?resize=1024%2C509&ssl=1)
編輯 Icon fonts 檔案名稱
iconMoon 編輯匯入的 SVG 檔。
![iconMoon 編輯匯入的 SVG 檔](https://i0.wp.com/footmark.com.tw/wp-content/uploads/2022/02/6f938f58f808d8022d6cd6ebe18aade9.png?resize=1024%2C509&ssl=1)
編輯要產生 Icon fonts 的 HTML class 名稱。
到時就是使用 HTML class 名稱來呈現您的 Icon font.
![iconMoon 編輯要產生 Icon fonts 的 HTML class 名稱](https://i0.wp.com/footmark.com.tw/wp-content/uploads/2022/02/0262c1b52f447cfe443ca915272b145d.png?resize=1024%2C579&ssl=1)
刪除 Icon fonts 原本的顏色。
如無刪除 Icon font 顏色,到時會無法直接使用 CSS 選擇 HTML class 名稱來設定顏色,必須透過 CSS 的 HTML class 名稱::before 才能設定顏色,會很麻煩。
![iconMoon 刪除 Icon fonts 原本的顏色](https://i0.wp.com/footmark.com.tw/wp-content/uploads/2022/02/196bc1cc31d57515f7866f7c98283f3f.png?resize=1024%2C579&ssl=1)
已刪除顏色的 Icon font。
![iconMoon 已刪除 Icon fonts 原本的顏色](https://i0.wp.com/footmark.com.tw/wp-content/uploads/2022/02/298388be437559da71be6fb273aee7f0.png?resize=1024%2C579&ssl=1)
SVG 轉成 Icon fonts
點擊【Generate Font】將 SVG 轉成 Icon fonts。
![iconMoon 將 SVG 轉成 Icon fonts](https://i0.wp.com/footmark.com.tw/wp-content/uploads/2022/02/d80c58243235b90d081b9ab52035c4c8.png?resize=1024%2C579&ssl=1)
匯入和使用
下載 SVG 轉換完成 Icon fonts 的圖檔。
![iconMoon SVG 轉換完成 Icon fonts 的圖檔](https://i0.wp.com/footmark.com.tw/wp-content/uploads/2022/02/71f984491af990c6c9318034cdee18e1.png?resize=1024%2C579&ssl=1)
查看 demo.html 的使用方式
將解壓縮下載的所有檔案,放至新建的一個資料夾,並打開 demo.html 查看使用方式。
注意上述設定的名稱會自動加上前綴 icon- 的 HTML class 名稱。
![iconMoon 查看 demo.html 的使用方式](https://i0.wp.com/footmark.com.tw/wp-content/uploads/2022/02/644e948d78b2355b0fab22d21ee0efce.png?resize=1024%2C475&ssl=1)
![創用 CC 授權條款](https://i.creativecommons.org/l/by-sa/3.0/tw/88x31.png)
本著作係採用創用 CC 姓名標示-相同方式分享 3.0 台灣 授權條款授權.