當今天在製作網頁時，為了讓網頁的區塊更直覺，都會在區塊中，加入一些圖示，除了讓版面看起來更生動外，也可讓使用者操作時更直覺，但有些既定印的圖示，其實倒不用都自已畫，網路上已有許多免費的資源可使用，且都還是向量檔，因此無論放大或縮小，都不用擔心影像會失真 ， 同時還可透過CSS來設定圖示的顏色， 而這些小圖示其實只是一個文字檔， 裡面的圖示相當的多元，從一般的指標、影音、社群、文件......一盡俱全，因此身為網頁設計人員，怎能錯過呢?現在就一塊來看看，怎麼下載與使用吧!

---

Typicons：

---

進入Typicons網站後，點一下Typicons on GitHub選項。

---

接著再點右下的Download ZIP鈕。

---

下載解壓後，進到src/font的資料夾後，再雙響demo.html 。

---

這時候就會看到，所有的小圖示。

---

當要使用時，只要在</head>前，引用css檔再把字型給載入。

---

接著回到demo.html的頁面後，開啟網頁開發者工具，選取一下所要的圖示，再對著已選到的網頁標籤，按滑鼠右鍵，選擇Copy as HTML 。

---

把剛的html貼回頁面中 。

---

這樣就可看到啦!

---

由於它是文字檔，因此當要改變大小時，則是用font-size與color來改變顏色，是不是超方便的呀!