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

程式碼

其他相關文章

  • [筆記] Ultimate AWS Certified Developer Associate (27)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (38)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 11 Mongoose 實作運用
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (37)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 10 Mongoose 額外補充和模組化
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (36)
  • [筆記] Ultimate AWS Certified Developer Associate (26)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 9 Mongoose 連線基本操作
  • [筆記] Ultimate AWS Certified Developer Associate (25)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (35)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 8 – Promise, async 和 await
  • [筆記] Ultimate AWS Certified Developer Associate (24)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (34)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 7 – MongoDB 操作 CRUD 相關指令(下)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (33)
  • [筆記] Ultimate AWS Certified Developer Associate (23)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 6 – MongoDB 操作 CRUD 相關指令
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (32)
  • [筆記] Ultimate AWS Certified Developer Associate (22)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (31)
  • [筆記] Ultimate AWS Certified Developer Associate (21)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 5 – MongoDB 環境建置
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (30)
  • [筆記] Ultimate AWS Certified Developer Associate (20)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (29)
  • [筆記] Ultimate AWS Certified Developer Associate (19)
  • [指南] Heroku 自動佈署子資料夾的專案
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 4 – 佈署到 Heroku 遠端
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (28)
  • [筆記] Ultimate AWS Certified Developer Associate (18)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 3 – POSTMAN 和自建 TodoList API Server
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (27)
  • [筆記] Ultimate AWS Certified Developer Associate (17)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 2 – npm
  • [筆記] 前端、行銷需知道的 GTM 綁定 Google Analytics 用 JavaScript 客製化追蹤
  • [筆記] Ultimate AWS Certified Developer Associate (16)
  • [筆記] 前端特殊字元處理邏輯
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 1 – Node.js 介紹和 node 模組原理
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (26)
  • [筆記] Ultimate AWS Certified Developer Associate (15)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (25)
  • [筆記] Ultimate AWS Certified Developer Associate (14)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (24)
  • [筆記] Ultimate AWS Certified Developer Associate (13)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (23)
  • [筆記] Ultimate AWS Certified Developer Associate (12)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (22)
  • [筆記] Ultimate AWS Certified Developer Associate (11)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (21)
  • [筆記] Ultimate AWS Certified Developer Associate (10)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (20)
  • [筆記] Ultimate AWS Certified Developer Associate (9)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (19)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (18)
  • [筆記] Ultimate AWS Certified Developer Associate (8)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (17)
  • [筆記] Ultimate AWS Certified Developer Associate (7)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (16)
  • [筆記] Ultimate AWS Certified Developer Associate (6)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (15)
  • [筆記] Ultimate AWS Certified Developer Associate (5)
  • [筆記] PHP 中傳入 JavaScript 的參數值到網址列 Query
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (14)
  • [筆記] JavaScript 不重整頁面動態修改 URL 中的 Query 參數
  • [筆記] Ultimate AWS Certified Developer Associate (4)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (13)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (12)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (11)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (10)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (9)
  • [筆記] CSS all:revert – 讓 CSS 設定部分還原成瀏覽器預設狀態
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (8)
  • [指南] SVG Icons 提供 Single Path 的 SVG 檔案
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (7)
  • [指南] 免管理員權限 – 跨平台的 NVS 來管理多版本 Node.js + Git Bash + CMD
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (6)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (5)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (4)
  • [指南] Vuetify 2 Dark Mode 配色設定與一些細節
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (3)
  • [指南] 申請 Patreon 創作者的每月訂閱付款後台設定
  • [指南] 如何加入官方 Github Sponsors 的等候清單
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (2)
  • [筆記] 初探 WordPress Restful API – 用 JSON 方式取得文章
  • [指南] 替 Vue-SFC-Rollup 開發的 Vue 套件做個於 Github Pages 的 Demo 頁面
  • [筆記] BLISK 執行 Mobile Test 的實用瀏覽器
  • [筆記] 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 改寫
    • 按讚加入粉絲團

    延伸閱讀