章節連結
Google 所維護的 Material icon 是一個公開且可商用的資料庫,由於是向量圖形式,所以無論螢幕尺寸是何大小,都可以輕鬆的看清楚。預設提供 SVG, PNG 和 icon Font 三種型式,且有 18, 24, 36 和 48 px 四種大小。
如何使用
1. 在載入網頁使用前,記得有先行載入圖示字型 – Google Fonts,直接用 CDN 的方式引入即可。
2. 點選右上角的 Resources,然後搜尋你要的圖示名稱
程式碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// HTML 部分 <head> .......(ignored) <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <i class="material-icons md-18">notifications_active</i> <i class="material-icons md-24">notifications_active</i> <i class="material-icons md-36">notifications_active</i> <i class="material-icons md-48">notifications_active</i> // CSS 部分 由於官方的 css,只有內建 24px 的樣式,你可以自定以下的 CSS class,這樣可以輕鬆使用其他三種尺寸 以 scss 方式撰寫如下 .material-icons{ &.md-18 { font-size: 18px; } &.md-36 { font-size: 36px; } &.md-40 { font-size: 40px; } &.md-48 { font-size: 48px; } } |
其他相關文章
延伸閱讀
- [筆記] AlphaCamp 不只是刷題的 Leetcode 訓練營 – 4
- [筆記] TypeScript + D3.js + Vue 3 – 幫長條圖加上基本的水平、垂直軸 ( x, y axis)
- [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 7
- [指南] npm 預設下載來源更改 – 因應中國的特殊規矩
- [指南] 解決中國境內無法使用 raw.githubusercontent.com 下載套件的問題
GA瀏覽人氣:84