近期出現非常多的向量圖示集，或者可以說是素材庫，以網頁字型（Webfont）方式載入圖示後再透過 CSS 顯示某個圖案，這麼做的好處是支援各種尺寸螢幕，包括 Retina 顯示器，而且也能夠在最短時間開啟網頁，不用擔心拖慢顯示速度。此外，一套圖示裡有非常多圖形，可以用於使用者介面開發或原生應用程式，如果你正好缺圖，可以來本文介紹的網站找找。
Typicons 是一款開放原始碼、設計線條簡單的免費圖示集，一共有 336 種圖案，使用者只需要從 Github 網站下載特定檔案，再將它載入網站或專案就能使用，其中包含原始的 SVG 格式，使用者也能依照自己需求來建構你自訂的圖示集。
如同於之前介紹過的 Octicons、Evil Icons 和 Entypo，其實在使用上大同小異，如果你不清楚如何使用，Typicons 也提供完整的「How to use Typicons」教學，若你使用 Bower 可以透過一行指令取得這套圖示的相關檔案，其他使用者則可從 Github 獲取所有檔案。
網站名稱：Typicons
網站鏈結：https://typicons.com/
使用教學
STEP 1
開啟 Typicons 網站後，可以看到所有圖示集裡的圖案，目前一共 336 種，其實好像沒有限定那一種類型的操作介面或應用程式才能用，種類還蠻完整的。
STEP 2
將滑鼠游標移動到圖示上方，除了會放大顯示，還能從下方得知這個圖示的名稱，這是用來載入顯示某個圖示使用的，稍後我會再提到更詳細的使用方法。
STEP 3
點擊 Typicons 網站上方的「Download」按鈕連接到 GitHub，可以取得原始碼檔案，擇一下載即可，最主要的是 /src/font/ 資料夾下的檔案，不知道語法怎麼寫，請參考 demo 網頁檔的原始碼寫法。
STEP 4
在「How to use Typicons」也有簡易教學，其實只要放上一段載入 typicons.min.css 樣式表的語法，或者從你現有的 CSS 加入 @font-face 載入 .eot、.woff、.ttf、.svg 等幾個必要檔案就能使用，網站上提供範例寫法，路徑稍微改一下就能使用。
本文前面第二個步驟顯示的圖示名稱其實就是 CSS 樣式，透過 <span> 標記的 class 來載入圖示就能使用，更多設定方法可以參考官方網站的說明文件。
