使用 Icon Font ( 圖示字體 )
Icon Font 是一種使用字體方式呈現向量圖示的網頁技術，使用 Icon Font 可以大幅減少網頁對於圖片載入的依賴，並可靈活的縮放各種圖示，這篇教學會介紹如何在 HTML 和 CSS 中使用 Icon Font，以及幾個非常好用的 Icon Font 網站。
快速導覽：
認識 Icon Font
Icon Font 又稱作圖示字體或符號字體，Icon Font 所使用的圖示或符號，除了基本的字母和數字，更包含多種形狀、箭頭、動作或概念圖示。Icon Font 是常見的網頁設計技術，主要有下列的優點：
- 向量圖形特性：Icon Font 是向量圖形，可以任意放大或縮小而不影響品質，適合各種不同的螢幕解析度。
- 檔案較小：和其他圖示圖片相比，Icon Font 的檔案較小，可以減少頁面載入時間。
- 容易使用：只需要加入對應名稱的 CSS 類別就能使用。它為您提供靈活性和自訂選項。
- 一致設計風格：同樣類型的 Icon Font 具有相同的設計風格，可讓網頁設計更一致。
Icon Font 和 SVG Icon 的比較
在網頁中使用向量圖示，Icon Font 或 SVG 圖示是兩種極為常見的做法，下方列出這兩種做法的差異，可按照各自的需求選用不同的做法。
| 特點 | Icon Font | SVG Icon |
|---|---|---|
| 格式 | 向量格式 | 向量、點陣格式都可以 |
| 瀏覽器支援度 | 都支援 | 都支援 |
| 文件大小 | 較小，載入一次即可。 | 可能比 Icon Font 大，且需要分開載入或內嵌在網頁中。 |
| 無障礙設施 | 只能辨認對應 unicode | 可明確辨識為圖示與描述。 |
| 使用者互動 | 基本文字類型互動 | 高互動性，可加入動畫或其他互動效果。 |
| 擴充與修改 | 字體產生後只能修改顏色或尺寸，修改需要重新產生字體。 | 可以使用程式擴充或調整。 |
開始使用 Icon Font
要使用 Icon Font，必須要先透過一些工具建立字體檔案，可使用下方常用的線上工具建立自己的 Icon Font ( 都不用註冊就能使用，文章下方有相關教學 )：
- IcoMoon APP：https://icomoon.io/app/
- Fontello：https://fontello.com/
不論是使用那種 Icon Font 產生工具產生的 Icon Font，使用的方式都相同，步驟如下：
- 1、首載入自己的 Icon 字體
- 2、在 HTML 中使用
span加入圖示。- 3、替
span加入指定的 class 名稱，就會出現對應的 Icon Font。- 4、出現 Icon Font 之後，修改尺寸與顏色。
下方是在 HTML 使用 Icon Font 的基本結構。
<!-- HTML 程式碼 -->
<head>
<!-- 其他 meta 內容 -->
<link rel="stylesheet" href="Icon Font 檔案">
</head>
<body>
<div>
<span class="icon-name"></span> <!-- Icon Font 擺放位置 -->
<span class="mls">前方是 ICON</span>
</div>
</body>
Icon Font 工具：IcoMoon
IcoMoon 是一個強大的 Icon Font 線上產生工具，IcoMoon 除了一些特殊圖示包需要付費，大多數的圖示包都是免費且不需註冊就能使用，免費功能也包含使用者上傳自己的 SVG 產生 Icon Font，是個使用 Icon Font 時的必備工具。
前往 IcoMoon APP：https://icomoon.io/app/
開啟網頁後，點擊上方書本「library」圖示開啟圖示包清單，點擊「+Add」按鈕就能將該圖示包加入工具畫面，點擊「-Remove」就能移除該圖示包。
回到 IcoMoon APP 畫面，選擇要產生 Icon Font 的圖示，也可點擊右上方圖示選擇「Select All」全選圖示，完成後點擊右下方「Generate Font」按鈕開始產生 Icon Font。
下載 Icon Font 之前，可以在畫面中設定該圖示的名稱與 unicode 編碼 ( 建議 unicode 按照預設編碼 )，完成後點擊右下角「Download」按鈕就能下載一個 Icon Font 的 zip 壓縮檔。
將壓縮檔解壓縮後，demo-files 資料夾裡為預覽的檔案，fonts 資料夾裡為產生的圖示字體檔，style.css 是設定字體的 CSS 檔案。
開啟 style.css 檔案，@font-face 表示這個 Icon Font 的設定，設定後就能在 font-family 中使用 icomoon 的字體名稱，[class^="icon-"],[class*=" icon-"] 表示特定名稱選擇器的樣式，最下方的類別名稱會根據 unicode 產生對應的圖示。
參考 demo.html 的內容，將 HTML 改成下方的程式碼，開啟網頁後就能看見 Icon Font 出現在網頁中。
<html>
<head>
<meta charset="utf-8">
<title>OXXO Icon Font 測試</title>
<link rel="stylesheet" href="style.css"></head>
<style>
body {font-size: 40px;}
</style>
<body>
<div>
<span class="icon-home"></span> icon-home<br>
<span class="icon-home3"></span> icon-home3<br>
<span class="icon-camera"></span> icon-camera<br>
<span class="icon-headphones"></span> icon-headphones<br>
<span class="icon-music"></span> icon-music<br>
<span class="icon-play"></span> icon-play
</div>
</body>
</html>
Icon Font 工具：Fontello
Fontello 是一個好用的 Icon Font 線上產生工具，不但免費且不需註冊就能使用，也可以讓使用者上傳自己的 SVG 產生 Icon Font*，是個使用 Icon Font 時的必備工具。
前往 Fontello：https://fontello.com/
選取要產生 Icon Font 的圖示，前往「Customize Names」頁籤可修改圖示名稱。
切換到「Customize Codes」頁籤可修改圖示的 unicode，建議使用預設值。
全部動作完成後，點擊右上角「Download webfont」按鈕將 Icon Font 下載為 zip 檔案。解壓縮之後 demo.html 是預覽的頁面，css 資料夾設定字體的 CSS 檔案，font 資料夾裡為產生的圖示字體檔。
開啟 fontello.css 檔案，@font-face 表示這個 Icon Font 的設定，設定後就能在 font-family 中使用 fontello 的字體名稱，[class^="icon-"]:before,[class*=" icon-"]:before 表示特定名稱選擇器的樣式，最下方的類別名稱會根據 unicode 產生對應的圖示 ( 其他 css 檔案只是一些額外設定或獨立設定，所以查看這份檔案即可 )。
參考 demo.html 的內容，將 HTML 改成下方的程式碼，開啟網頁後就能看見 Icon Font 出現在網頁中。
<html>
<head>
<meta charset="utf-8">
<title>OXXO Icon Font 測試</title>
<link rel="stylesheet" href="css/fontello.css"></head>
<style>
body {font-size: 40px;}
</style>
<body>
<div>
<span class="icon-eye"></span> icon-eye<br>
<span class="icon-videocam"></span> icon-videocam<br>
<span class="icon-camera"></span> icon-camera<br>
<span class="icon-emo-thumbsup"></span> icon-emo-thumbsup<br>
<span class="icon-emo-devil"></span> icon-emo-devil<br>
<span class="icon-emo-beer"></span> icon-emo-beer
</div>
</body>
</html>
使用特殊符號或文字取代 Icon Font
雖然操作 Icon Font 的步驟很簡單，但對於一些特殊符號而言，有時使用「現成的」特殊符號會更方便，在 unicode 的定義中，已經包含許多「特殊符號」，基本上只要直接「複製貼上」，或透過一些作業系統提供的輸入法就能產生這些特殊符號，下方提供「特殊符號大全」網站，只要點擊想要的特殊符號，就能複製並使用該符號。
前往：特殊符號大全
透過「特殊符號」替代 Icon Font 時需要注意，特殊符號在不同作業系統、不同的社群平台或不同瀏覽器中的表現可能有所不同，下方範例會使用四種不同瀏覽器呈現特殊符號的效果。
小結
Icon Font 圖示字體是網頁設計必備的技巧，如果能夠更理解 @font-face 與 CSS 虛擬元素選擇器，就更能掌握 Icon Font 的精髓，趕快把網頁中的圖示圖片換成 Icon Font 吧。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～