圖標 Icon
Icon在網站中雖然不是最為重要的,但也扮演著不可獲缺的角色。文字與文字間適當的加上Icon能夠提高內容的辨識度,且讓畫面得到更多
Last updated
Icon在網站中雖然不是最為重要的,但也扮演著不可獲缺的角色。文字與文字間適當的加上Icon能夠提高內容的辨識度,且讓畫面得到更多
Last updated
在主類別的代表圖標將採用SVG動畫的表現方式來增加識別性。在首頁呈現尺寸以78px*78px為標準,而內頁將圖標尺寸縮減為52px*52px來對應文字呈現。
如需引用參數請前往「元件 - SVG」
為了達到風格一致性與減少流量的要求,網站內圖標盡可能取用以下網址當中 Icon Font。使用時必須達到圖文相互對應之要求,以避免給予使用者錯誤的引導。
Font Awesome 圖標取用網址:https://fontawesome.com/v4.7.0/icons/
以下為建議使用之圖標,如項目無法於下方對應請至 Font Awesome 尋找相對應之圖示。
放入所需代碼即可呈現 <i class="代碼" aria-hidden="true"></i>
以''首頁''為例:<i class="fa fa-home" aria-hidden="true"></i>
圖標 | 使用 | 代碼 | 連結 |
首頁 | fa fa-home | ||
設定 | fa fa-cog | ||
下載 | fa fa-cloud-download | ||
搜尋/檢索 | fa fa-search | ||
編輯/修改/調整 | fa fa-pencil-square-o | ||
往上 | fa fa-arrow-up | ||
往左/上一步 | fa fa-arrow-left | ||
往右/下一步 | fa fa-arrow-right | ||
往下/導入 | fa fa-arrow-down | ||
頁碼上一頁 | fa fa-chevron-left | ||
頁碼下一頁 | fa fa-chevron-right | ||
連結 | fa fa-link | ||
重填/重整 | fa fa-refresh | ||
確認/確定/已選擇 | fa fa-check | ||
鎖定 | fa fa-lock | ||
列印 | fa fa-print |