[指南] 如何使用 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> 的形式載入即可

程式碼

其他相關文章

  • [筆記] Advanced Google Analytics 4 Implementation with Tag Manager ( 6 )
  • [筆記] Element Plus UI 將 el-tag 的文字變成可依照大小「自動換行」
  • [筆記] Advanced Google Analytics 4 Implementation with Tag Manager ( 5 )
  • [筆記] Ultimate AWS Certified Developer Associate (114)
  • [筆記] Advanced Google Analytics 4 Implementation with Tag Manager ( 4 )
  • [筆記] Advanced Google Analytics 4 Implementation with Tag Manager ( 3 )
  • [筆記] 用 Svelte 製作 UI 元件前要先知道的 Shadow DOM 和 Custom Element
  • [筆記] Advanced Google Analytics 4 Implementation with Tag Manager ( 2 )
  • [指南] 初探 – 用 Svelte 製作一個 UI 元件
  • [筆記] Ultimate AWS Certified Developer Associate (113)
  • [筆記] Advanced Google Analytics 4 Implementation with Tag Manager ( 1 )
  • [筆記] Ultimate AWS Certified Developer Associate (112)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (26)
  • [筆記] Ultimate AWS Certified Developer Associate (111)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (25)
  • [筆記] Vue3 Keep-alive 的操作注意事項
  • [筆記] 網頁 UX 優化 – 用 Gmail 開啟一封新信件表單
  • [筆記] Ultimate AWS Certified Developer Associate (110)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (24)
  • [筆記] Total TypeScript – 解析 TypeScript 所給的錯誤訊息 讓你能夠看懂
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (23)
  • [筆記] Ultimate AWS Certified Developer Associate (109)
  • [筆記] Vue3 加入 Google Analytics 4 心得
  • [筆記] Ultimate AWS Certified Developer Associate (108)
  • [指南] Nuxt3 腳本撰寫採坑記錄
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (22)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (21)
  • [筆記] Ultimate AWS Certified Developer Associate (107)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (20)
  • [筆記] Ultimate AWS Certified Developer Associate (106)
  • [筆記] Vue 監聽頁面離開、關閉的方法
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (19)
  • [筆記] Ultimate AWS Certified Developer Associate (105)
  • [筆記] Vue3 中 reactive 響應式操作陣列 array 的注意事項
  • [筆記] Ultimate AWS Certified Developer Associate (104)
  • [筆記] Ultimate AWS Certified Developer Associate (103)
  • [筆記] Vue3 中用安全的方法取得 Proxy 的值
  • [筆記] Ultimate AWS Certified Developer Associate (102)
  • [筆記] Sheet JS – xlsx 雙向輸出的 JSON XLSX 轉換套件
  • [筆記] Ultimate AWS Certified Developer Associate (101)
  • [筆記] 布魯斯的 TypeScript 入門教學 – 用 TypeScript 輕鬆打造實時聊天室 (9)
  • [筆記] Nuxt 整合 Sentry Sass 服務導入筆記
  • [筆記] Vue 3 整合 Sentry Sass 服務導入筆記
  • [筆記] Ultimate AWS Certified Developer Associate (100)
  • [筆記] Ultimate AWS Certified Developer Associate (99)
  • [指南] 使用 vue-qrcode 套件出現 No input text 解決方法
  • [筆記] Ultimate AWS Certified Developer Associate (98)
  • [指南] Google Tag Manager 幫 GA 加上 onChange 監聽事件
  • [筆記] Ultimate AWS Certified Developer Associate (97)
  • [筆記] Ultimate AWS Certified Developer Associate (96)
  • [筆記] CSS 的 height auto, initial, inherit 的區別
  • [筆記] Ultimate AWS Certified Developer Associate (95)
  • [筆記] iOS Safari 對於 100vh 的解讀和調整
  • [筆記] Ultimate AWS Certified Developer Associate (94)
  • [筆記] 電腦版上的 hover 效果在手機版的替代方式
  • [筆記] Ultimate AWS Certified Developer Associate (93)
  • [筆記] Ultimate AWS Certified Developer Associate (92)
  • [筆記] 升級 Mac 系統版本 VS Code 出現 Unable to find a Git executable 錯誤解決辦法
  • [筆記] Ultimate AWS Certified Developer Associate (91)
  • [指南] 使用 Bootstrap 的排版系統邏輯時，如何讓卡片維持等高
  • [筆記] Ultimate AWS Certified Developer Associate (90)
  • [筆記] Ultimate AWS Certified Developer Associate (89)
  • [筆記] Country Region Data – NPM 上共同維護的國家地區資料
  • [筆記] Ultimate AWS Certified Developer Associate (88)
  • [筆記] Ultimate AWS Certified Developer Associate (87)
  • [指南] 整合 Google Tag Manager 和導入 Google Analytics 4 概念和問與答
  • [筆記] Ultimate AWS Certified Developer Associate (86)
  • [筆記] Ultimate AWS Certified Developer Associate (85)
  • [筆記] Ultimate AWS Certified Developer Associate (84)
  • [筆記] Vue3 TypeScript 版本的 JSON Editor – vue3-ts-jsoneditor
  • [筆記] Ultimate AWS Certified Developer Associate (83)
  • [指南] Better Ruler 前端開發必備的網頁測量小工具
  • [筆記] Ultimate AWS Certified Developer Associate (82)
  • [筆記] TypeScript Eslint 解決 ES2015 module syntax is preferred over custom TypeScript modules and namespaces. 錯誤
  • [筆記] TypeScript + Vite + Vue3 使用 setup 無法使用 Enum 的探究和解法
  • [筆記] Ultimate AWS Certified Developer Associate (81)
  • [指南] WangEditor 點選工具列選單 噴出 Unable to preventDefault inside passive event listener invocation 錯誤
  • [指南] 用 FormData 傳送 array 陣列資料的幾種方法
  • [筆記] 透過 CSS 將文字以直式的方式呈現
  • [筆記] Ultimate AWS Certified Developer Associate (80)
  • [指南] 前端開發必備 JSONPlaceholder 讓你輕鬆獲取假資料填充網頁
  • [筆記] Ultimate AWS Certified Developer Associate (79)
  • [筆記] Google Tag Manager 之 GA 事件參數取得的各種方法
  • [筆記] Ultimate AWS Certified Developer Associate (78)
  • [指南] 如何讓使用者點擊一個圖片連結，是直接下載而不是在畫面上顯示
  • [筆記] Pure CSS 打造右側出現的 OffCanvas 效果
  • [筆記] Ultimate AWS Certified Developer Associate (77)
  • [筆記] 在 Vue 中用 Vanilla JavaScript 方法來打造無限滾動 Infinite Scroll
  • [筆記] Ultimate AWS Certified Developer Associate (76)
  • [筆記] Vue ScrollView 來打造無限捲動 Infinite Scroll
  • [筆記] Git rebase 專案的第一筆 commit
  • [筆記] Ultimate AWS Certified Developer Associate (75)
  • [筆記] Ultimate AWS Certified Developer Associate (74)
  • [筆記] 使用 Normalize.css 時，請記得調整 box-sizing 計算方式
  • [筆記] Ultimate AWS Certified Developer Associate (73)
  • [筆記] CSS 製作漸層色的邊框
  • [指南] SVG Repo 超過 300000 個的免費 SVG 查詢和下載
  • [筆記] Ultimate AWS Certified Developer Associate (72)
  • [筆記] JavaScript 判斷使用者為 iOS、Android 或是桌機
  • [筆記] Ultimate AWS Certified Developer Associate (71)
    • 按讚加入粉絲團

    延伸閱讀