[指南] 如何使用 Google 所提供的 Material Icon

Posted onAuthorANDY LIEN

章節連結

Google 所維護的 Material icon 是一個公開且可商用的資料庫，由於是向量圖形式，所以無論螢幕尺寸是何大小，都可以輕鬆的看清楚。預設提供 SVG, PNG 和 icon Font 三種型式，且有 18, 24, 36 和 48 px 四種大小。
material icon

如何使用

1. 在載入網頁使用前，記得有先行載入圖示字型 – Google Fonts，直接用 CDN 的方式引入即可。
2. 點選右上角的 Resources，然後搜尋你要的圖示名稱
material-icon list 3. 以 <i class=”material-icons”>Icon Name</i> 的形式載入即可

程式碼

其他相關文章

  • [筆記] Nuxt js 初探筆記 5 – Nuxt Generate 模式下跳轉到 Error Page
  • [筆記] JavaScript 按鈕自動下載類型與程式碼
  • [筆記] Vue Router & Vuex 合用解決動態路由和重新整理刷新問題
  • [指南] Python 非管理員權限安裝並架設虛擬環境 Windows
  • [筆記] Google Adsense App 不能使用後的替代方案
  • [筆記] Nuxt js 初探筆記 4 – SEO 相關的逐頁設定
  • [筆記] 用原生 JavaScript 製作 Debounce 效果
  • [指南] 免管理員權限安裝 MongoDB 本機端開發環境
  • [筆記] Nuxt js 初探筆記 3 – 佈署靜態頁面的測試問題
  • [筆記] 使用 ASCII Tree Generator 視覺化工具產生樹狀圖
  • [筆記] jQuery css 加入 !important 的注意事項
  • [指南] IPInfo.io 查詢你的 IP 位置的相關細節資訊
  • [指南] 版本大更新 Stylelint 14 – 檢測並修正專案的 CSS 格式
  • [指南] 藉由 Free Google Title Rewrite Checker 來檢查文章標題是否被 Google 改寫
  • [筆記] Nuxt js 初探筆記 2 – 解決 Vuex 持久化問題
  • [筆記] 使用 Crypto.getRandomValues() 來抓取亂數
  • [筆記] Nuxt js 初探筆記 1 – 基礎環境建置
  • [筆記] Vuetify select autocomplete 套件限制多選數量
  • [筆記] 判斷瀏覽器為手機端還是 PC 端的方法
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 38 – 專案協作上的常見問題
  • [指南] 串接金流開發用 – 測試用信用卡產生器 Credit Card Generator
  • [指南] Emoji Finder 方便你於電腦中複製貼上 iOS 的表情符號
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 37 – 如何與工程師互動 2
  • [指南] Redirect Checker – 301, 302 以及更多的 http 狀態碼
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 36 – 如何與工程師互動
  • [指南] V-Calendar 限制時間選取範圍
  • [指南] Fast or Slow – 由 Wordfence 維護的網站測速工具
  • [筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 在靜態網站中獲取資訊
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 35 – 原型設計的種類與技巧
  • [筆記] Google SpreadSheet API V4 改版 – 當作前端開發所需的 API 來源
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 34 – 設計標註檔
  • [筆記] Echarts 利用 visualMap 讓折線圖實現分段不同顏色
  • [筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 利用 BeautifulSoup 來解析網頁原始碼
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 33 – 切圖命名與格式
  • [筆記] 善用 ECharts 中的 MarkArea 和 MarkLine 來製作出圖表上區域色塊
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 32 – 設計規範
  • [筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 利用 Requests 模擬請求和攔截回應
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 31 – 深色模式
  • [筆記] Dayjs 解決時區、夏令時間 和 UTC 間的轉換問題
  • [筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 從網頁溝通架構到爬蟲運作原理
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 30 – 頁面
  • [筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – Python 的基本語法
  • [筆記] Vue-ECharts Tooltip 套用 RWD 避免破版的相關設定
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 29 – 改變頁面狀態來提升使用者體驗
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 28 – 響應式排版
  • [筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 網頁爬蟲的起源和處理策略
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 27 – 高轉換的登陸頁
  • [筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 資料科學與網頁爬蟲
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 26 – 模板
  • [筆記] HiSKIO 圖解 AWS+GCP：雲端雙平台入門完全指南 – 20 – GCP 儲存類別和生命週期
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 25 – 運用常見的介面版型排出好設計
  • [筆記] HiSKIO 圖解 AWS+GCP：雲端雙平台入門完全指南 – 19 – GCP Cloud Storage 架構和版本控管
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 24 – 頁尾
  • [筆記] HiSKIO 圖解 AWS+GCP：雲端雙平台入門完全指南 – 18 – GCP Cloud Storage
  • [筆記] Vue-ECharts RWD 設定與封裝
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 23 – 頁首
  • [筆記] HiSKIO 圖解 AWS+GCP：雲端雙平台入門完全指南 – 17 – AWS EC2 vs GCP Compute Engine
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 22 – C.R.A.P. 四個幫助你優化介面的設計準則
  • [筆記] HiSKIO 圖解 AWS+GCP：雲端雙平台入門完全指南 – 16 – Machine Image
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 21 – Form 表單
  • [筆記] HiSKIO 圖解 AWS+GCP：雲端雙平台入門完全指南 – 15 – Persistent Disk 方案比較
  • [筆記] Vue-cli HTTP 431 Error 錯誤排查解決記錄
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 20 – DataTable 資料表
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 19 – Alert 警告訊息
  • [筆記] HiSKIO 圖解 AWS+GCP：雲端雙平台入門完全指南 – 14 – GCP Local SSD vs Persistent Disk
  • [指南] Vue-Router 的巢狀路由和 Empty View 妙用
  • [筆記] HiSKIO 圖解 AWS+GCP：雲端雙平台入門完全指南 – 13 – GCP Compute Engine
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 18 – Modal 互動視窗
  • [筆記] HiSKIO 圖解 AWS+GCP：雲端雙平台入門完全指南 – 12 – GCP Security Rules
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 17 – Card 卡片
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 16 – Tooltip 提示工具
  • [筆記] 初次開發 Google Chrome 套件時要注意的事項
  • [指南] 前端工程師開發必備的 Heroku + Node.js 佈署自己的 CORS 轉址伺服器
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 15 – 摺疊面板
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 14 – 導覽元件
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 13 – 通用設計
  • [指南] Vue3 搭配 vue-i18N 的全域注入設定
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 12 – 色彩
  • [筆記] 用 vuex-persistedstate 來保持你的 vuex 狀態
  • [指南] Dotnet 結合 Vue 的 MVC 專案規劃架構 – 佈署階段
  • [指南] Dotnet 結合 Vue 的 MVC 專案規劃架構 – 開發階段
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 11 – 文字
  • [筆記] 用 Python 批次轉換經緯度實作 – 注意事項
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 10 – 連結和圖示
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 9 – 單選按鈕和複選框
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 8 – Input 輸入格
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 7 – 物件狀態
  • [指南] JSON Formatter / Differ 驗證和比較你的 JSON 檔
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 6 – 按鈕
  • [指南] AbuseIPDB 查詢和回報可疑的 IP 位置資訊
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 5
  • [指南] Vue-Cli 發佈時輸出 Copyright 於 CSS 和 JS 檔內
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 4
  • [筆記] Bootstrap 5 新增自適應 RWD 的字體大小
  • [筆記] JavaScript 強迫終止瀏覽器的 Request 指令
  • [筆記] Google Chrome 實驗中的便利新功能 – 閱讀清單
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 3
  • [筆記] Bootstrap 5 Icons 無論你是否有用 Bootstrap 都可用
  • [筆記] UI 設計入門：畫出有程式邏輯的設計稿 – 2
  • [筆記] JQuery 中的 .data() 方法妙用
    • 按讚加入粉絲團

    延伸閱讀