Material icons 圖標大全
全部圖標地址：Material icons 圖標大全 | WP2
MATERIAL DESIGN下共計900多個Material Icons圖標，全部來自一個小文件，由Google字體服務器托管，也可以自行托管，支持所有現代Web瀏覽器，着色，大小和位置都采用css，基於矢量:在任何比例下，視網膜顯示，低dpi顯示屏看起來都很棒
圖標字體在最小的 woff2 格式中僅重 42KB，在標准 woff 格式中為 56KB。相比之下，使用gzip壓縮的SVG文件通常大小約為62KB,但是通過僅將所需的圖標編譯為具有符號精靈的單個SVG文件，可以大大減少大小。
安裝方法
1. 直接引入Google CDN提供的地址
在任何網頁中使用的最簡單方法是：包含以下一行HTML，無需任何配置即可使用
|
1
|
|
2. 自托管
需要一些額外的設置：將圖標字體托管在某個位置，並添加以下 CSS @font-face 的src路徑：/material-icons.woff2，例如Google提供的圖標文件：https://fonts.gstatic.com/s/materialicons/v118/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2， 如果你覺得google這個cdn提供的速度有點慢的話，你可以使用國內bootcdn的鏈接 https://www.bootcdn.cn/material-design-icons/，里面有各版本的各類型的圖標文件，當然也可以下載下來在本地引入。
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
@font-face {
font-family
:
'Material Icons'
;
font-style
:
normal
;
font-weight
:
400
;
src:
url
(https://cdn.bootcdn.net/ajax/libs/material-design-icons/
2.0
.
0
/iconfont/MaterialIcons-Regular.woff
2
)
format
(
'woff2'
);
}
.material-icons {
font-family
:
'Material Icons'
;
font-weight
:
normal
;
font-style
:
normal
;
font-size
:
24px
;
line-height
:
1
;
letter-spacing
:
normal
;
text-transform
:
none
;
display
:
inline-block
;
white-space
:
nowrap
;
word-wrap
:
normal
;
direction
:
ltr
;
-webkit-
font-feature-settings
:
'liga'
;
-webkit-font-smoothing: antialiased;
}
|
3.通過Git / npm / bower安裝
|
1
2
3
4
5
6
|
// 通過 Git 安裝
$ git clone http:
//github.com/google/material-design-icons/
// 通過 npm 安裝
$ npm install material-design-icons
// 通過 bower 安裝
$ bower install material-design-icons
|
使用方法
在HTML中使用，將要用的圖標名稱放在任意標簽名內部即可。以下是一個face圖標：
|
1
2
3
4
5
6
|
<!--一個紅色的face圖標-->
<
i
style
=
"color: red"
class
=
"material-icons"
>face</
i
>
<!--一個delete圖標，大小為18px-->
<
i
class
=
"material-icons md-18"
>delete</
i
>
<!--一個face圖標，大小為36px，在深色背景下使用-->
<
i
class
=
"material-icons md-light md-36 md-light"
>face</
i
>
|
文章來自：Material icons 圖標大全 | WP2
全部圖標地址：Material icons 圖標大全 | WP2