製作自己的 Icon Font ( SVG to Icon Font )
在「使用 Icon Font」的教學文已經介紹了如何使用 Icon Font，這篇教學會介紹如何繪製適合的 SVG，並將 SVG 轉換成 Icon Font，製作自己的專屬的 Icon Font。
快速導覽：
繪製 SVG Icon
產生 Icon Font 的向量圖形除了需要是「SVG 格式」，還必須遵守下列幾點規範，基本上只要遵守規範，就能繪製出漂亮的 Icon Font。
繪製單色剪影向量圖形
轉換成 Icon Font 的圖形只支援向量圖形，並只會保留「路徑」，因此製作時此用「剪影」的概念製作單色圖形，需要留白區域都必須裁切「鏤空」，勿使用白色填充，下方範例圖展示有鏤空和沒有鏤空的效果差異。
注意，盡可能透過「複合路徑」的方式包裝複雜的形狀，避免產生多個路徑。
整體尺寸使用「正方形」，畫布的高度等於字體的「行高」
當 Icon Font 要與文字對齊時，通常預設會透過 baseline 對齊，而不同轉換工具對於 base line 的設定有所不同，IcoMoon 預設的 baseline 距離底部 6.25% ( 可以修改 )，Fontello 預設的 baseline 距離底部 15% ( 可以修改 )，如果希望產生的 Icon Font 與文字進行 baseline 的對齊，設計 SVG 就必須注意和邊緣的距離，下方範例圖展示不同邊框間距的效果差異。
更多參考：文字行高、文字縮排
使用 IcoMoon 自製 Icon Font
開啟 IcoMoon 工具，點擊上方「Import Icons」，上傳自己製作的 SVG Icon。
- 前往 IcoMoon APP：https://icomoon.io/app/
- 範例檔案：icon-oxxo.svg、icon-dog.svg、icon-poo.svg
上傳完成點擊「Generate Font」開始產生 Icon Font。
如果預覽沒有問題，點擊「Download」按鈕就可以下載檔案，或者也可以點擊上方「Preferences」進行細部設定，例如 baseline 的位置等等。
完成後使用 style.css，就能出現自己製作的 Icon Font。
<html>
<head>
<meta charset="utf-8">
<title>OXXO 自製 Icon Font</title>
<link rel="stylesheet" href="style.css"></head>
<style>
span {font-size: 50px;}
</style>
<body>
<span class="icon-icon-poo"></span>
<span class="mls"> icon-icon-poo</span><br>
<span class="icon-icon-dog"></span>
<span class="mls"> icon-icon-dog</span><br>
<span class="icon-icon-oxxo"></span>
<span class="mls"> icon-icon-oxxo</span>
</body>
</html>
使用 Fontello 自製 Icon Font
開啟 Fontello 工具，把自己製作的 SVG Icon 拖拉到「Drag custom SVG icons」的區域，就能上傳自己的 SVG Icon。
- 前往 Fontello：https://fontello.com/
- 範例檔案：icon-oxxo.svg、icon-dog.svg、icon-poo.svg
上傳完成後點擊「Download webfont」按鈕就可以下載檔案，也可以點擊上方「設定圖示」進行細部設定，例如 baseline 的位置等等。
完成後使用 style.css，就能出現自己製作的 Icon Font。
<html>
<head>
<meta charset="utf-8">
<title>OXXO 自製 Icon Font</title>
<link rel="stylesheet" href="style.css"></head>
<style>
span {font-size: 50px;}
</style>
<body>
<span class="icon-icon-poo"></span>
<span class="mls"> icon-icon-poo</span><br>
<span class="icon-icon-dog"></span>
<span class="mls"> icon-icon-dog</span><br>
<span class="icon-icon-oxxo"></span>
<span class="mls"> icon-icon-oxxo</span>
</body>
</html>
小結
自製 Icon Font 可以替網頁增添許多個人化的風格，也可避免按鈕圖示跟別人長得相同，更可以發揮設計師設計 Icon 的專長，如果有設計專長的工程師，不妨試試看自己設計 Icon Font。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～