在网页中使用Material Design图标

2018-07-16 本文已影响542人画星星高手

什么是Material Design图标

MD大家都听过的吧，就是谷歌的Material Design设计，Material Design图标就是符合
MD设计语言的图标。
本文通过字体的方法在网页中显示Material Design图标。

What are material icons

Material design system icons are simple, modern, friendly, and sometimes quirky. Each icon is created using our design guidelines to depict in simple and minimal forms the universal concepts used commonly throughout a UI. Ensuring readability and clarity at both large and small sizes, these icons have been optimized for beautiful display on all common platforms and display resolutions.

See the full set of material design icons in the Material Icons Library.

准备

1. 使用谷歌在线字体

这是最方便的方式：

引入在线CSS文件

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

2. 使用本地字体

由于某些你懂的原因，谷歌服务在大陆是无法使用的，所以我们可以把这些字体下载下来，然后在网页中引用即可。

下载地址：https://github.com/google/material-design-icons/tree/master/iconfont

新建CSS文件：

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}