# 圖標 Icon

![](https://637533841-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Loxp1jRO6hQiR0OZSzm%2F-LtcsRq1mXoBx23Jep-q%2F-LtcxsmGhdLZZ5zyoJ7T%2Ficon_banner.png?alt=media\&token=235171ec-38ad-47ec-b185-f6376b9da327)

## 大類別圖標

![](https://637533841-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Loxp1jRO6hQiR0OZSzm%2F-Lp143eMXsxbON_uUuaG%2F-LoyzxQ_eUBDcLUZIxEG%2Ficon_banner.png?alt=media\&token=2ba5785e-0f56-4d78-abc3-7b60b376bc22)

在主類別的代表圖標將採用SVG動畫的表現方式來增加識別性。在首頁呈現尺寸以78px\*78px為標準，而內頁將圖標尺寸縮減為52px\*52px來對應文字呈現。

如需引用參數請前往「[元件 - SVG](https://tiponet.gitbook.io/tiponet/yuan-jian-component/svg-dong-hua)」

## 圖標選擇建議

為了達到風格一致性與減少流量的要求，網站內圖標盡可能取用以下網址當中 Icon Font。使用時**必須達到圖文相互對應之要求**，以避免給予使用者錯誤的引導。

Font Awesome 圖標取用網址：<https://fontawesome.com/v4.7.0/icons/>

#### 使用該網內圖標請加入以下連結：

```markup
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
```

## 使用

以下為建議使用之圖標，如項目無法於下方對應請至[ Font Awesome ](https://fontawesome.com/v4.7.0/icons/)尋找相對應之圖示。

放入所需代碼即可呈現 `<i class="代碼" aria-hidden="true"></i>`

**以''首頁''為例：**`<i class="fa fa-home" aria-hidden="true"></i>`

| 圖標                                                                                                                                                                                                                                                                        | 使用        | 代碼                    | 連結                                                           |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | --------------------- | ------------------------------------------------------------ |
| <img src="https://637533841-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Loxp1jRO6hQiR0OZSzm%2F-LtXbVKh10P7raKT2dF4%2F-LtXc5lsPEpnLPObCXd0%2Ffa_home.jpg?alt=media&#x26;token=73b16f38-5db1-4a2f-8eb4-503bcaac667d" alt="" data-size="line">            | 首頁        | fa fa-home            | [➥Link](https://fontawesome.com/v4.7.0/icon/home)            |
| <img src="https://637533841-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Loxp1jRO6hQiR0OZSzm%2F-LtXJ7XsQGN91KByr9fk%2F-LtXY93SHL8aC2_XMcXb%2Ffa_cog.jpg?alt=media&#x26;token=afb2ba32-79e3-42f7-b2c9-5ebe6d5cd4ae" alt="" data-size="line">             | ​設定       | fa fa-cog             | [➥Link](https://fontawesome.com/v4.7.0/icon/cog)             |
| <img src="https://637533841-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Loxp1jRO6hQiR0OZSzm%2F-LtXJ7XsQGN91KByr9fk%2F-LtXaZ03WDw3Uqm8q-FS%2Ffa_cloud_download.jpg?alt=media&#x26;token=f99ce624-b2c5-423f-ac3e-de70f2359760" alt="" data-size="line">  | 下載        | fa fa-cloud-download  | [➥Link](https://fontawesome.com/v4.7.0/icon/cloud-download)  |
| <img src="https://637533841-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Loxp1jRO6hQiR0OZSzm%2F-LtXJ7XsQGN91KByr9fk%2F-LtXaa7_LmMgt9iBfTgC%2Ffa_search.jpg?alt=media&#x26;token=1d710c0b-98f2-4cf0-bb7e-2891a6257771" alt="" data-size="line">          | 搜尋/檢索     | fa fa-search          | [➥Link](https://fontawesome.com/v4.7.0/icon/search)          |
| <img src="https://637533841-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Loxp1jRO6hQiR0OZSzm%2F-LtXJ7XsQGN91KByr9fk%2F-LtXbU-SCD-CEpWQw_Go%2Ffa_pencil_square_o.jpg?alt=media&#x26;token=8e253e75-d84c-41db-ab51-bd66c32b4ec7" alt="" data-size="line"> | 編輯/修改/調整  | fa fa-pencil-square-o | [➥Link](https://fontawesome.com/v4.7.0/icon/pencil-square-o) |
| <img src="https://637533841-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Loxp1jRO6hQiR0OZSzm%2F-LtXdQc1t4s4TV28XuSw%2F-LtXhKoWMz12URO5igRv%2Ffa_arrow_up.jpg?alt=media&#x26;token=397d0605-e31f-4eb2-96d5-573b4029343b" alt="" data-size="line">        | 往上        | fa fa-arrow-up        | [➥Link](https://fontawesome.com/v4.7.0/icon/arrow-up)        |
| <img src="https://637533841-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Loxp1jRO6hQiR0OZSzm%2F-LtXdQc1t4s4TV28XuSw%2F-LtXhMgPMQE_JVpIKFDJ%2Ffa_arrow_left.jpg?alt=media&#x26;token=716cf314-0b99-4989-ba57-8666f5ccc996" alt="" data-size="line">      | 往左/上一步    | fa fa-arrow-left      | [➥Link](https://fontawesome.com/v4.7.0/icon/arrow-left)      |
| <img src="https://637533841-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Loxp1jRO6hQiR0OZSzm%2F-LtXdQc1t4s4TV28XuSw%2F-LtXhOYufRypKm8EhJs5%2Ffa_arrow_right.jpg?alt=media&#x26;token=89faf6be-8f74-4111-b287-f912d9215cc1" alt="" data-size="line">     | 往右/下一步    | fa fa-arrow-right     | [➥Link](https://fontawesome.com/v4.7.0/icon/arrow-right)     |
| <img src="https://637533841-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Loxp1jRO6hQiR0OZSzm%2F-LtXdQc1t4s4TV28XuSw%2F-LtXhQibHEu4xjbWnKJy%2Ffa_arrow_down.jpg?alt=media&#x26;token=bc9f43ba-1e7d-42d8-b117-b8b0d8dee61a" alt="" data-size="line">      | 往下/導入     | fa fa-arrow-down      | [➥Link](https://fontawesome.com/v4.7.0/icon/arrow-down)      |
| <img src="https://637533841-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Loxp1jRO6hQiR0OZSzm%2F-LtXhRzAOuNnAXq7of6M%2F-LtXkpg00v4HLe33jMM2%2Ffa_chevron_left.jpg?alt=media&#x26;token=499b267b-c03b-498e-a5fd-3f2179198236" alt="" data-size="line">    | 頁碼上一頁     | fa fa-chevron-left    | [➥Link](https://fontawesome.com/v4.7.0/icon/chevron-left)    |
| <img src="https://637533841-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Loxp1jRO6hQiR0OZSzm%2F-LtXhRzAOuNnAXq7of6M%2F-LtXkrW7GMsPBjoAALHr%2Ffa_chevron_right.jpg?alt=media&#x26;token=6c2e2569-9b95-4d27-a2e0-b4121763b2b8" alt="" data-size="line">   | 頁碼下一頁     | fa fa-chevron-right   | [➥Link](https://fontawesome.com/v4.7.0/icon/chevron-right)   |
| <img src="https://637533841-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Loxp1jRO6hQiR0OZSzm%2F-LtXhRzAOuNnAXq7of6M%2F-LtXiq5Ongts2iXMTTM8%2Ffa_link.jpg?alt=media&#x26;token=02138e48-f356-4bf2-9c34-1b564251d0b3" alt="" data-size="line">            | 連結        | fa fa-link            | [➥Link](https://fontawesome.com/v4.7.0/icon/link)            |
| <img src="https://637533841-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Loxp1jRO6hQiR0OZSzm%2F-LtXl_UU2lzdQLPg_Znx%2F-LtXni9zjqmWEQQro6o2%2Ffa_refresh.jpg?alt=media&#x26;token=80570a52-5a19-44a7-90fd-c6b88f6b94d9" alt="" data-size="line">         | 重填/重整     | fa fa-refresh         | [➥Link](https://fontawesome.com/v4.7.0/icon/refresh)         |
| <img src="https://637533841-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Loxp1jRO6hQiR0OZSzm%2F-LtXnjRLCu-7Ky7o5BYn%2F-LtXo_eRlZx2GtYJuXB9%2Ffa_check.jpg?alt=media&#x26;token=bc05ea11-d433-4e31-8727-89d4eceb2fb4" alt="" data-size="line">           | 確認/確定/已選擇 | fa fa-check           | [➥Link](https://fontawesome.com/v4.7.0/icon/check)           |
| <img src="https://637533841-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Loxp1jRO6hQiR0OZSzm%2F-LtXnjRLCu-7Ky7o5BYn%2F-LtXs7nGFU6YCjbIYw2I%2Ffa_lock.jpg?alt=media&#x26;token=47e76d87-911a-491c-9805-5b18fccb3a18" alt="" data-size="line">            | 鎖定        | fa fa-lock            | [➥Link](https://fontawesome.com/v4.7.0/icon/lock)            |
| <img src="https://637533841-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Loxp1jRO6hQiR0OZSzm%2F-LtXnjRLCu-7Ky7o5BYn%2F-LtXpGfkxrhB_vvB359u%2Ffa_print.jpg?alt=media&#x26;token=a174dd89-805f-47b1-8a4c-ef88d990fe98" alt="" data-size="line">           | 列印        | fa fa-print           | [➥Link](https://fontawesome.com/v4.7.0/icon/print)           |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tiponet.gitbook.io/tiponet/feng-ge-style/tu-biao-icon.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.