你的網站是否也用了很多小圖示，例如 "首頁"、"留言對話泡泡"、"Email"等等？這些圖檔雖然體積小，但每個檔案的載入都需要耗費一個 http 請求，是影響網頁載入速度的一個小原因。最早為了解決這個問題，出現「CSS SPRITE」技術，將多個小圖合併為一張圖，減少了大量 http 請求。但由於手續繁雜、加上管理不便，沒什麼人有耐心採用這項技術。
後來發展出「ICON FONT」，把小圖示製作成字形，不但可減少 http 請求，每個圖示還能向量無限縮放尺寸，簡直是劃時代的技術。其中最有名的是「FONT AWESOME」這套字型，包含了不少網頁常用圖示，是許多網頁範本的愛用字型。
不過最近發現的驚奇是，其實從遠古時代就一直存在的 UNICODE 特殊符號，會是網頁小圖示更方便的選擇，本篇將詳細介紹他的優點。
(示意圖出處: foodiesfeed.com)
先簡單看一下 Unicode 特殊符號的效果，下圖是本站之前側邊欄使用的小圖示：
目前已經全面汰換成 Unicode 圖案：
一、UNICODE 與 FONT AWESOME 比較
Font Awesome 算是 Icon Font 的代表性字型，因此作為比較基準。
1. 字型檔
兩者都需要載入外部字型檔，雖然減少了小圖示的 http 請求，不過字型檔都不小，且 Unicode 的字型檔更大。
然而網頁小圖示使用的數量並不多，Unicode 字型檔有技巧可以只載入需要的特殊符號就好，如此檔案傳輸量反而遠低於 Font Awesome，後面會詳述。
2. 符號數量
符號數量越多，代表字型檔案越大。目前 Font Awesme 官網公布的數字為，4.3 版含 519 個圖案。
而 Unicode 各國文字的數量太多先略過，屬於圖案的部分超過一千個，可參考「Unicode 表情圖案 + 特殊符號一覽表」。
兩者皆不斷更新，持續有新圖案推出，
3. 使用方式
這一項才是真正讓 WFU 想採用 Unicode 的一點，主要原因為 Font Awesome 字型的使用方式讓我覺得不方便，可參考「官網範例」，例如想要顯示照相機圖案，其使用的語法為：
<i class="fa fa-camera-retro"></i>這麼一大串語法還滿麻煩的，對於輸入不太方便，並非 WFU 想追求的懶人法。
使用 Unicode 的話，這一切就能懶人化，先查閱「Unicode 表情圖案 + 特殊符號一覽表」，找到對應的圖案，例如火箭圖案，那麼在網頁想顯示的地方，直接擺上 Html 代碼：
🚀輸入以上字元就行了，是不是方便很多呢？
二、最佳安裝方式
在網頁安裝 Unicode 字型的方式，上一篇「如何讓 Unicode 特殊符號在網頁上正常顯示？」已經有簡單的教學，說明如何外連「Open Font Library」提供的字型檔。而其缺點為，必須載入整個 Unicode 字型檔，且檔案不小，以下說明只載入特定字元的方法。
1. 字型檔分流路徑
首先找出 Open Font Library 所提供的「Segoe UI Symbol」字型路徑：
http://openfontlibrary.org/assets/fonts/segoe-ui-symbol/e729ed87ea736b6b2c6f64550775452f/523ab078aac307d0e576a80bc155d32e/SegoeUISymbolRegular.ttf要直接外連也可以，但外部伺服器哪天出問題也不是我們能控制的，最保險還是上傳到自己的網路空間，例如 Google Drive，可參考「Google Drive 檔案分流教學」，分流後取得外連網址。
2. 安裝語法
接著在範本中 </head> 之前，插入以下 CSS 語法：
<style>
@font-face {
font-family: 'SegoeUISymbolRegular';
src: url('http://openfontlibrary.org/assets/fonts/segoe-ui-symbol/e729ed87ea736b6b2c6f64550775452f/523ab078aac307d0e576a80bc155d32e/SegoeUISymbolRegular.ttf') format('truetype');
unicode-range: U+1F680, U+1F683, U+1F684;
}
.symbol{font-family: 'SegoeUISymbolRegular';}
</style>- 綠色字串請參照「1. 字型檔分流路徑」自行改為分流後的路徑。
- 紅色字串為代表 Unicode 圖案的編碼字串，請參照「Unicode 表情圖案 + 特殊符號一覽表」，查閱 "CSS"這一行的字串，例如將火箭圖案的編碼 "\1F680"改成 "U+1F680"即可。訣竅很簡單，就是將 "\"字元改為 "U+"。
- 上面程式碼的舉例用了三個圖案，分別為 "火箭"、"火車"、"高鐵"圖案，如果整個網站只需要用到這三個圖案，那麼紅色字串的部分，請填入這三個編碼即可，彼此間用小寫逗號 ","隔開。
- 藍色字串如用不到可刪除，請見之後的說明。
三、使用方式
有兩種使用方法，讀者可根據自己的需求來選擇：
- 第一種準備動作多，使用方法字串較短。
- 第二種準備動作少，使用方法字串較長。
方式-1：
如果 Unicode 字元確定只在網頁某個區塊使用，例如文章區塊(假設 class 名稱為 post-body)，那麼可參考「網頁中英文字型跨平台設定最佳化」→「六、依網頁不同區塊設定 font-family」，記得在文章區塊的 font-family 之中，加入這個字型 "SegoeUISymbolRegular"，例如將上述程式碼的藍色字串改為：
.post-body{font-family: 所有原本的字型名稱, SegoeUISymbolRegular; }完成以上設定後，在文章區塊就能隨意加入你想顯示的 Unicode 圖案。例如想加入火箭圖案，在「Unicode 表情圖案 + 特殊符號一覽表」查到火箭的 "HTML"編碼為 ""，在文章區塊直接使用此字串即可。
方式-2：
如果對 CSS 不熟悉，「使用方式-1」的方法做不來，那麼可以保留原本安裝程式碼中的藍色字串，然後在網頁中任何想使用 Unicode 圖案(例如火箭符號)的地方，插入以下語法：
<span class="symbol">🚀</span>這會是比較簡單的方法，若要使用其他符號，請查詢 WFU 製作的「Unicode 特殊符號一覽表」來替換 HTML 編碼字元。
四、補充及使用效果
如果覺得 Unicode 特殊符號的色彩單調，其實就像一般字型一樣，都可以用 CSS 做各種效果。如果熟悉 CSS 語法，利用上色、背景色、放大縮小、動畫等等，就能讓 Unicode 圖案活潑起來。
最後附上 WFU BLOG 其他區塊使用 Unicode 圖案的效果，由於 Unicode 圖案選擇性高，數量遠超過任何一款 Icon Font，相信讀者都能找到各種實用的小圖示，加快網頁的載入速度。
標題區塊：
首頁圖案：
文末資訊：
更多字型相關主題：