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

章節連結

• 如何使用
• 程式碼
• 其他相關文章

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

---

如何使用

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

---

程式碼

---

其他相關文章

[筆記] 解決 VS Code Terminal 中無法正常顯示字體的問題

[筆記] HTML 與 PUG 線上格式轉換

[筆記] 網頁切版直播班 2020 春季班 – 第七週

[筆記] 使用 Gulp 進行網頁前端自動化 – 用一般 HTML 來製作樣板並排版

[筆記] 使用 Gulp 進行網頁前端自動化 – 依照開發環境調整佈署內容

[筆記] 使用 Gulp 進行網頁前端自動化 – 架設簡易伺服器和壓縮程式碼

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

[筆記] 使用 Gulp 進行網頁前端自動化 – Gulp 和 Bower 串接

[筆記] 網頁切版直播班 2020 春季班 – 第六週

[筆記] 使用 Gulp 進行網頁前端自動化 – PostCSS 自動加上前綴 & Load Plugins

[筆記] 網頁切版直播班 2020 春季班 – 第五週

[筆記] Carbon 程式碼使用 讓你的網頁程式碼顯示的更漂亮

[筆記] 使用 Gulp 進行網頁前端自動化 – 初始化你的第一個 Gulp 編譯專案

[筆記] 開始使用 Github Pages

[筆記] 使用 Gulp 進行網頁前端自動化 – 簡介

[筆記] 網頁切版直播班 2020 春季班 – 第四週

[筆記] 來訓練你的手指運動 – 英打練習 Typing Pratice

[筆記] Emmet 網路開發必備簡碼 加速你的開發流程

[筆記] 網頁切版直播班 2020 春季班 – 第三週

[筆記] 運用 Moment.js 製作 AM / PM 時間外掛

[筆記] HTML5 Input time 時間格式

[筆記] 網頁切版直播班 2020 春季班 – 第二週

[筆記] 網頁切版直播班 2020 春季班 – 第一週

[筆記] MarkMan 跨平台 設計稿標註與量測工具

[筆記] Sass 實戰全攻略 – 11 – 自製格線系統

[筆記] CodeSandbox 線上編輯器 模擬前端框架

[筆記] Sass 實戰全攻略 – 10 – 設計模式和規範

[筆記] 工字型樣板，長方形依照比例縮放

[筆記] Element-UI 的自定義表格邊框樣式

[筆記] Vue 關於 slot-scope 的簡易認知

[筆記] Chart.js 長條圖 最大值用特別顏色表示

[筆記] Sass 實戰全攻略 – 9 – 錯誤的 CSS 設計方式

[筆記] Vue Watch 監聽並延後發送請求

[筆記] Sass 實戰全攻略 – 8 – 關於命名的那些事兒

[筆記] Element UI Table 表格表頭縱向顯示

[筆記] Sass 實戰全攻略 – 7 – Sass/CSS 設計模式 (OOCSS)

[筆記] Sass 實戰全攻略 – 6 – Sass/CSS 設計模式 (Smacss)

[筆記] 自定義 Element UI 標題欄位遇上 Vue/no-unused error 的解決方法

[筆記] CSS 上常見的水平置中 & 垂直置中方法

[筆記] Sass 實戰全攻略 – 5 – mixin 解決響應式網頁的斷點問題

[筆記] Sass 實戰全攻略 – 4 – mixin 統整你常用的 CSS 方法

[筆記] Sass 實戰全攻略 – 3 – import 切分檔案和維護

[筆記] Vue2 Perfect-Scrollbar 置底開始

[筆記] Sass 實戰全攻略 – 2 – 變數的運用

[筆記] Body-Parser 無法解析的 FormData 解決方案 – multer

[筆記] Sass 實戰全攻略 – 1 – 簡介

[全端開發] 打造一個公開聊天室 Vue.js+MySQL+Socket.io+passport-jwt

[指南] 簡單製作自己的 Google 套件 (Extension)

[筆記] CSV 檔匯入 PostgreSQL 常見錯誤一覽

[筆記] 使用 PGAdmin 操作 Heroku 上的 PostgreSQL

[筆記] FlatIcon 免費非商業使用的向量圖示圖庫

[筆記] 2020 前端工程師面試全記錄

工程師之路 Learning Programming

[指南] 線上 QR Code 產生器

[筆記] 台灣縣市二聯式選單 tw-city-selector.js

[筆記] Node.js 在 Windows 上的開發環境建置

[筆記] Heroku Sequelize 佈署細節

[筆記] HTML 表格 Table 的 tr td th 用法

[筆記] 運用 Heroku 佈署的初始化步驟

[筆記] 線上正規表示式測試器

[筆記] TinyURL 服務串接

運用 Node.js 建網站的初始化步驟

[筆記] JavaScript 雙層選單篩選連動

[筆記] Heroku 佈署問題：如何將 Git 的子資料夾專案推上雲端？

[筆記] Google, Facebook, Github OAuth 認證設定申請

Mongo DB 條件操作符

Express Validator 操作介紹

安裝 MongoDB 出現 SocketException: Address already in use 錯誤

[筆記] KeyCode & querySelectorAll 全部加上事件

[筆記] Can I Use 查詢語法在各瀏覽器上可否正常使用

[筆記] JavaScript 將兩個 array 合併一個 array

[筆記] 純 CSS 製作圖片輪撥效果

[筆記] API 串接, Axios 和綁定DOM事件

[筆記] CSS ul li 水平置中方法

[筆記] Async 非同步處理和 JSON Object 取值

[筆記] textContent, event.target 和 innerHTML

[筆記] BootStrap Card + Grid System + Modal 彈出視窗

[筆記] Lorem Picsum 網頁開發自動生成縮圖

[部落格經營] Contact form 7 表格自動縮放

[部落格經營] WordPress 中文 摘要 錯誤修正

按讚加入粉絲團

延伸閱讀

• [筆記] 解決 VS Code Terminal 中無法正常顯示字體的問題
• [筆記] 網頁切版直播班 2020 春季班 – 第七週
• [筆記] HTML 與 PUG 線上格式轉換
• [筆記] 使用 Gulp 進行網頁前端自動化 – 依照開發環境調整佈署內容
• [筆記] 使用 Gulp 進行網頁前端自動化 – 用一般 HTML 來製作樣板並排版