Material + Icon的使用方法

文章来源: https://www.1117.work/article/104/article_detail/

1. 下载Icon+css文件http://fonts.googleapis.com/icon?family=Material+Icons

或者自定义demo.css文件 写入如下内容：

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v43/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) 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;
}

引入demo.css文件或者引入 刚刚你下载的文件 或者直接引入

<link rel='stylesheet' href='[http://fonts.googleapis.com/icon?family=Material+Icons](http://fonts.googleapis.com/icon?family=Material+Icons)' type='text/css'>

2. 进入网址选适合你的icon

https://material.io/tools/icons/?icon=person_pin&style=baseline

3.直接使用i标签 class加入 material-icons属性 assignment_ind 替换你选的icon名称即可

<i class="material-icons">assignment_ind</i>