SVG 轉換 Icon fonts 教學，運用 iconMoon 網頁平台

2022-03-21 腳印網頁資訊設計

Icon fonts 圖片，能讓您在網頁上就像設定文字顏色 color、大小 font-size 一樣的方便，本文將iconMoon 網頁平台，來將 SVG 轉換成 Icon fonts。

儲存 SVG 檔

先將您在 Illustrator 或其它平台，畫好的向量圖存成 .svg 檔案。

開啟 IcoMoon App - Icon Font, SVG, PDF & PNG Generator 平台，來將儲存的向量圖轉成 Icon fonts

點擊【Import icons】來多選您要匯入的 SVG 檔。

iconMoon 匯入四個 SVG 檔完成

iconMoon 編輯匯入的 SVG 檔。

編輯要產生 Icon fonts 的 HTML class 名稱。

到時就是使用 HTML class 名稱來呈現您的 Icon font.

刪除 Icon fonts 原本的顏色。

如無刪除 Icon font 顏色，到時會無法直接使用 CSS 選擇 HTML class 名稱來設定顏色，必須透過 CSS 的 HTML class 名稱::before 才能設定顏色，會很麻煩。

已刪除顏色的 Icon font。

點擊【Generate Font】將 SVG 轉成 Icon fonts。

下載 SVG 轉換完成 Icon fonts 的圖檔。

將解壓縮下載的所有檔案，放至新建的一個資料夾，並打開 demo.html 查看使用方式。

注意上述設定的名稱會自動加上前綴 icon- 的 HTML class 名稱。