1. 首頁
    2. >>
  2. 筆記 Notes
    3. >>
  3. [指南] 如何使用 Google 所提供的 Material Icon

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

程式碼

其他相關文章

  • [指南] npm 預設下載來源更改 – 因應中國的特殊規矩
  • [指南] 解決中國境內無法使用 raw.githubusercontent.com 下載套件的問題
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 7
  • [筆記] TypeScript + D3.js + Vue 3 – 幫長條圖加上基本的水平、垂直軸 ( x, y axis)
  • [筆記] Lodash 比較物件 Object 是否更動的一些細節
  • [筆記] TypeScript + D3.js + Vue 3 – 讓長條圖有 RWD 效果
  • [筆記] TypeScript + D3.js + Vue 3 – 初探 & 畫個長條圖
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 6
  • [指南] Vue TestCafe + TypeScript 導入 E2E 測試
  • [指南] Vue 結合 Jest + TypeScript 導入單元測試 – 2
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 5
  • [指南] Vue 結合 Jest + TypeScript 導入單元測試 – 1
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 4
  • [指南] Windows 中用 DOS 輸出資料樹狀圖
  • [指南] Amazon EC2 安裝 Matomo ( Google Analytics ) 來代替 Google Analytics
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 3
  • [筆記] Vue 2 導入 TypeScript 相關記事
  • [指南] 運用 BrowserSync 來重整頁面 達成 Hot Reload
  • [筆記] Vuetify + Babel + Vue.config.js 最佳化實踐
  • [指南] Vue 結合 StyleLint 來統一你的 CSS 樣式
  • [指南] Vue 結合 ESLint 來格式化你的程式碼
  • [指南] 替 IDE 換個喜歡的開發字型吧 Dev Fonts 提供線上預覽
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 2
  • [筆記] 用 Powershell 解決非系統管理員無法新增永久環境變數的問題
  • [指南] Vue 整合最新版本的 Swiper 輪播套件
  • [指南] Vulnerability DB by Snyk 套件漏洞查詢好幫手
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 1
  • [筆記] jQuery Smart Wizard 5 對使用者和開發者都友善的引導頁面
  • [指南] Amazon Web Service ( AWS ) 學習筆記連載-6
  • [指南] Amazon Web Service ( AWS ) 學習筆記連載-5
  • [指南] 前端自動化開發 Gulp + PHP + Browserify
  • [指南] Amazon Web Service ( AWS ) 學習筆記連載-4
  • [指南] CSS Background Patterns 簡易單色背景 CSS 語法產生器
  • [指南] Amazon Web Service ( AWS ) 學習筆記連載-3
  • [指南] 前端自動化開發工具 Gulp 4 + Babel 7 + Browserify 整合紀錄
  • [指南] Amazon Web Service ( AWS ) 學習筆記連載-2
  • [指南] 遠端開發實作 – 搭配 Amazon AWS EC2 – Node.js 伺服器設定
  • [指南] 網頁前後端分離開發 常見的跨網域問題解決方式一覽
  • [指南] 給初心者在 AWS EC2 Linux 主機安裝 Laravel 的排解指南
  • [指南] Amazon Web Service ( AWS ) 學習筆記連載 – 1
  • [筆記] Vue 按鈕 / 篩選資料架構
  • [指南] Windows 上使用免安裝 Node.js + Git Bash
  • [筆記] 2020 第二次前端工程師面試全記錄
  • [指南] Heroicons 開源免安裝 直接複製貼上的 SVG 圖示
  • [指南] Mac 上的快速架站好幫手 MAMP
  • [指南] 你真的需要 jQuery 嘛？ jQuery 和 Vanilla JavaScript 轉換對照表
  • [指南] Vue.js 搭配 Docker 進行佈署
  • [筆記] 簡易型筆記本 Nute 瀏覽器輸入直接存成 TXT 檔
  • [筆記] Vue-Carousel 輕量化輪撥套件介紹
  • [指南] Embed Responsively 幫助 Google Maps, Youtube ….等加上自適應 RWD 效果
  • [指南] Chart.js 前端圖表實用工具
  • [筆記] 在 Vue 中正確引用 src/assets 裡的圖片
  • [筆記] 將 Vue 專案自動佈署到 Github Pages 上
  • [筆記] 網頁跨平台文字設定 Font-Family
  • [指南] Dynamic Dummy Image Generator 簡單好用的假圖生產器
  • [筆記] 使用 MySQL Workbench 操作 Heroku 上的 JawsDB MySQL
  • [指南] 特殊符號好難打？兩個網站讓你直接複製貼上
  • [指南] Responsively.app 前端工程師必備的 RWD 一個畫面全覽工具
  • [筆記] Vue 如何監控視窗寬度，並讓每個 component 可以取用
  • [指南] 在 Vue 專案中，修改 樣式方法
  • [筆記] Figma 前端 設計師協作工具簡單介紹
  • [筆記] 從 Vue CLI 3 開始建立規模化專案
  • [指南] Github 上的 Public APIs 列表
  • [指南] Iconmonstr 超過 4000 種的圖示 SVG, EPS, PSD, PNG 支援
  • [筆記] CSSgram – 輕鬆套用 Instagram 上的濾鏡效果
  • [筆記] Palettable 互動式的挑選配色工具
  • [筆記] Bootstrap 5 Alpha 版本上線囉 來看看新增些什麼
  • [筆記] Vuetify 客製化製作彈出 + 滾動選單
  • [筆記] Vuetify Expansion 客製標題按鈕
  • [筆記] 網頁切版直播班 2020 春季班 – 課後心得
  • [筆記] 如何客製化自己的 Bootstrap 設定檔
  • [筆記] 網頁切版直播班 2020 春季班 – 第八週
  • [筆記] 解決 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 – 設計模式和規範
  • [筆記] 工字型樣板，長方形依照比例縮放
    • 按讚加入粉絲團

    延伸閱讀

    GA瀏覽人氣：84