製作網站時小不免會使用到 ICON 用來標示功能，但是如果每一個 ICON 都使用一幅圖片來處理的話，在載入網站時便會使用大量時間。後來為了減少載入圖片的時間，使用了 ICON MAP 來解決。即是把所有的 ICON 都合併在一張圖片，然後使用 background-image 及 background-position 來決定顯示圖片的那一個位置。

![](https://cdn.19site.net/files/4c/c7/4cc7b0e4-2312-4e8c-9c3a-b0bd412c91a1.jpeg '傳統的 ICON MAP')

### 文字 ICON

在未開始前先看看這個網站 : https://fontawesome.com

這個網站提供了字型 ICON，供開發者免費或者付費使用。只需要匯入文字到項目，然後在相應的地方加入 CSS 就可以顯示文字 ICON 了。

### 用法

只需要在 HTML 中插入特定元素並設定好 `class` 就可以使用。

```html
<!-- use i element to reference to icon -->
<i class='fa fa-star'></i>

<!-- use span element to reference to icon -->
<span class='fa fa-star'></span>
```

詳細的情況可以查看這裏 : https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

### 在 React 上使用

要在 React 上使用先要使用 npm 安裝套件。

```sh
npm install @fortawesome/fontawesome-free
```

然後在 JS 或 JSX 檔案內載入套件。

```js
import '@fortawesome/fontawesome-free/css/all.css';
```

最後就可以使用上面的語法正常使用。

```html
<!-- use i element to reference to icon -->
<i className='fa fa-star' />

<!-- use span element to reference to icon -->
<span className='fa fa-star' />
```