一般我們在檢視網頁的時候都會發現它用了很多這種小圖示，以這個小定點陣圖標為例，給大家詳細說明如何引入圖示字型到自己的網頁吧。 如何下載圖示

1. 然後點選iconMoon App 就可以選擇自己想要的圖示字型啦
2. 選擇好之後，點選Generate Font（檢視自己選擇的小圖示）
3. 進來檢視自己選擇的圖示，沒有問題的話就可以下載啦 下載完畢，接下來就是如何引用到自己的網頁啦
4. 下載完成，解壓之後，有個fonts資料夾，將這個資料夾可以放到自己的專案底下。（就是這個樣子的）
5. 接下來就要引入CSS樣式啦

@font-face { /*宣告字型*/
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?xhon53');
  src:  url('../fonts/icomoon.eot?xhon53#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?xhon53') format('truetype'),
    url('../fonts/icomoon.woff?xhon53') format('woff'),
    url('../fonts/icomoon.svg?xhon53#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
 

注：此段程式碼大家可以直接複製貼上放到自己的CSS檔案裡 下一步就是如何引用圖示到自己的網頁中啦

1. 用上面定位的小圖示舉例說明吧 在北京前面放一個<i>標籤

2. 然後開啟自己下載的字型資料夾（demo)這個html檔案

3. 開啟之後就是這個樣子的（並選擇複製你想要的圖示，選擇那個小方框複製）

4. 複製好之後，放到<i>標籤裡就可以啦（這樣我們是看不見的哦，還需要引用的）

5. 最後一步就是在CSS檔案裡引用了（程式碼如下）

i{
font-family: "icomoon";/*引用字型*/
	font-style: normal;
	font-size: 14px;
}
 

最後我們就引用成功啦，可以開啟網頁看效果，效果圖如下哦（其他字型圖示也是一樣的用法哦） 歡迎指導，大家一起學習。