TechMoon 科技月球
WordPress、SEO 與 AI 工具實測指南
IcoMoon 教學：SVG 轉圖示字型與專案備份
IcoMoon 教學依舊版 App 完成 SVG 匯入、圖示字型下載與 demo 驗證，並實際以 selection.json 在乾淨瀏覽器還原專案。說明缺線、字型不顯示和編碼錯位的排查順序，以及新版 Beta 專案檔、免費功能與素材授權差異。
用 AI 摘要這篇文章：
IcoMoon 教學最容易漏掉的是下載之後：保留完整字型 ZIP 與 selection.json，日後才有原專案可接著更新。 這次我們用一個自製 SVG 匯出字型，再到乾淨瀏覽器還原，圖示名稱與字碼都保留下來。以下依舊版 App 畫面完成匯入、下載、驗證與備份，並說明新版 Beta 的檔名差異。
先確認你開的是舊版 App
IcoMoon 是把選中的向量圖示整理、轉成圖示字型或 SVG 等檔案的瀏覽器工具。圖示字型（icon font）把圖案放在字型的字元位置，網站再透過 CSS 指定要顯示哪個圖案。已有 icon font 的網站，可以用它維護自己的小型圖示集；只需要幾個獨立 SVG 時，則可直接走 SVG 匯出流程，不必為了使用 IcoMoon 改成字型。
截至 2026 年 9 月 10 日，官方首頁仍分成 Old App 與 New App Beta。以下操作使用舊版，畫面有「Import Icons」「Generate Font」按鈕；新版文件另有新的匯出與專案管理方式，不能逐步照搬。
先準備一個自己有權使用的簡單 SVG，另外保留原始檔。這次示範使用自製的實心圓形，沒有文字、外框描邊或漸層。我們實際完成匯入、下載字型包，以及在乾淨瀏覽器還原專案；這個結果不代表複雜插畫也能原樣轉換。
匯入 SVG 後，先看圖案有沒有缺線
- 開啟舊版 App，按左上「Import Icons」，選擇 SVG 檔。匯入後應出現新的圖示集；這次畫面顯示「Untitled Set」與一個圓形。
- 在選取模式點一下要匯出的圖示。底部「Selection」數量應增加；只看得到圖案，還不代表已選中。
- 點「Generate Font」。這次產生頁顯示「Glyphs: 1」、名稱
fixture-circle與字碼e900。確認圖形、名稱、數量都對，再下載。
如果不用自己的 SVG，可從「Add Icons From Library」加入圖示集，再選需要的項目。先查看該圖示集的授權連結，尤其是要放進客戶網站或商業產品時。
線條或文字不見，先檢查 SVG 結構。 舊版匯入文件說明，產生字型時會略過描邊（stroke）和文字元素；需先在向量編輯器將它們轉成實際填色形狀（fills）。例如 Inkscape 的描邊可用「Path → Stroke to Path」轉換。修改副本後重新匯入，並與原圖對照；別覆蓋唯一的設計原稿。
下載後，用 demo.html 驗證字型包
在「Generate Font」頁按底部「Download」，解壓縮下載的 ZIP。這次免費、未登入的下載包包含 selection.json、style.css、demo.html，以及 fonts 資料夾內的 WOFF、TTF 等字型檔；沒有 WOFF2。
先開 demo.html 看圖示是否正確顯示。若本機檔案的瀏覽器限制影響載入，可請開發者放到本機測試伺服器再看。我們在本機 HTTP 示範頁看到圓形，並確認 icomoon 字型已載入，對應字碼為 e900。
e900 是這次範例的結果，不是每個專案固定要用的值。你的圖示名稱、CSS 類別與字碼，都以自己下載包的內容為準。
只有示範頁正常後，才把整組 CSS 與它引用的字型檔接到網站，保留相對路徑。WordPress 的主題或頁面編輯器可能有自己的自訂圖示匯入規格；先查看該工具的文件，不要假設上傳任何 IcoMoon ZIP 都會接受。官方舊版 FAQ也將 WordPress 匯入相容性列為需確認的問題。
保留 selection.json，更新時從舊專案接著做
免費專案預設存於目前瀏覽器。清除網站資料、換瀏覽器或換電腦後，原專案不一定還在；登入免費帳戶也不能當作雲端備份。每次交付時保留完整 ZIP，尤其是 selection.json。
| 檔案 | 用途 | 更新時怎麼處理 |
|---|---|---|
| 原始 SVG | 保留可修改的設計來源 | 另存副本，不用轉換後的結果覆蓋原稿 |
| style.css 與 fonts | 讓網站實際顯示圖示 | 同一版本一起更新，保留上一版供回復 |
| selection.json | 還原舊版圖示、名稱、字碼與設定 | 先匯入原專案，再增減圖示 |
| demo.html | 檢查下載包能否正常顯示 | 部署前先驗證，再比對網站整合結果 |
要還原舊版專案，按左上主選單「Menu → Manage Projects」，選「Import Project」匯入 selection.json，再按新增專案那一列的「Load」。回到「Generate Font」確認名稱與字碼，下載後再核對一次。
這次在另一個乾淨瀏覽器環境照上述流程還原，重新下載的 JSON 仍保留圓形路徑、fixture-circle 名稱、e900 字碼與字型偏好設定。這是單一圖示的還原驗證；大型專案更新前仍應檢查既有圖示。
官方儲存說明區分了兩種匯入：Import Icons 也能讀取 selection.json，但透過 Project Manager 才會一併匯入專案設定。官方 FAQ另提醒，每次重新匯入全部 SVG 再選圖，可能依順序取得不同字碼。因此，原網站已在使用的字碼不能只靠圖示名稱相同就假定沒變。
新版 Beta 的專案還原說明提到的是下載包內的 .icomoon.json。請依實際使用版本保存專案檔，不要因為檔名不同就刪掉它。
圖示空白、變方塊或更新錯位，分開查
匯入時就缺線或變形： 回到 SVG 原稿檢查描邊、文字與重疊形狀，依舊版匯入要求轉換，再看產生頁。這時先不用改網站 CSS。
demo.html 正常，網站卻沒圖示： 開啟瀏覽器開發者工具，查看字型網址是否載入失敗、CSS 是否被其他樣式覆蓋。跨網域載入字型時，也要查看有沒有 CORS 錯誤。依官方排查順序，將網站的路徑與樣式對照可運作的 demo，先找出差異。
更新後顯示成另一個圖示： 比對新舊 selection.json 的名稱與字碼，以及網站是否混用新 CSS、舊字型或快取內容。先回復上一版配套的 CSS 與字型檔，再從原專案 JSON 重做更新；不要只替換其中一個檔案。
複製字元欄位看起來空白或像方塊： 官方說明這個欄位主要用來複製字元，不能單憑它判斷字型壞掉。先看 demo 內真正的圖示預覽。若 demo 也不正常，保留有問題的 SVG 與下載包，縮小成一個圖示的案例再向官方回報。
免費範圍、商用素材與雲端儲存要分開看
依目前官方方案頁，免費版可免註冊使用與本機保存專案；WOFF2、帳戶內保存專案等功能屬付費範圍。Basic 列有開發用途 hosting，Unlimited 才列有正式環境 CDN hosting。方案頁也提醒免費產生的連結 24 小時到期，因此請下載並保存檔案，不要把暫時連結當正式網站長期引用的網址。
工具免費不等於圖示庫每一包都能任意商用。官方授權說明要求查看各圖示集的 license；若是自己的向量，使用工具本身沒有額外素材授權要求，但第三方來源素材的使用權仍需自行確認。訂閱方案也不包含所有另外販售的圖示包。
資料處理方面，官方表示 SVG 匯入與字型產生在瀏覽器中完成，付費專案存入帳戶則涉及上傳；「Enable Quick Usage」也會上傳字型供 hosting 或分享。這次沒有開啟帳戶同步或 Quick Usage，不能據此替所有使用方式作零外傳保證。
先用一個非機密、自有 SVG 完成下載與還原。等 demo 顯示正確、JSON 能還原名稱與字碼，再把需要的圖示加入同一個專案，連同備份一起交付。
