javascript - 如何离线托管素材图标？

Question

如果这是一个非常简单的问题，我很抱歉，但是你如何使用没有

的谷歌 Material 图标

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

?

我希望我的应用程序即使在用户没有互联网连接时也能显示图标

Answer 1

方法二、自托管 Developer Guide

Download来自 github 的最新版本( Assets :zip 文件)，解压并复制包含 Material 设计图标文件的字体文件夹到您的本地项目中 -- https://github.com/google/material-design-icons/releases

您只需要使用 font来自存档的文件夹:它包含不同格式的图标字体(用于多种浏览器支持)和样板 css。

• 将 @font-face 的 url 属性中的源替换为本地项目中 iconfont 文件夹的相对路径(字体文件所在的位置)，例如。 url("iconfont/MaterialIcons-Regular.ttf")

@font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
   src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url(iconfont/MaterialIcons-Regular.woff2) format('woff2'),
        url(iconfont/MaterialIcons-Regular.woff) format('woff'),
        url(iconfont/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';
}

---

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

---

NPM/Bower 包

Google 正式有一个 Bower 和 NPM 依赖项选项——遵循 Material Icons Guide 1

使用 bower : bower install material-design-icons --save

使用 NPM:npm install material-design-icons --save

Material Icons:或者查看 Material design 图标字体和 CSS 框架以自托管图标，来自@marella 的 https://marella.me/material-icons/

---

注意

It seems google has the project on low maintenance mode. The last release was, at time of writing, 3 years ago!

There are several issues on GitHub regarding this, but I'd like to refer to @cyberalien comment on the issue Is this project actively maintained? #951 where it refers several community projects that forked and continue maintaining material icons.

---