如何离线托管材质图标？

javascript html cordova materialize

2022-08-30 02:39:27

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

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

?

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

答案 1

方法2。自托管开发人员指南

从 github 下载最新版本（资产：zip 文件），解压缩，然后将包含材质设计图标文件的字体文件夹复制到本地项目中 -- https://github.com/google/material-design-icons/releases

您只需要使用存档中的字体文件夹：它包含不同格式的图标字体（用于多浏览器支持）和样板css。

将的 url 属性中的源代码替换为本地项目中 iconfont 文件夹的相对路径（字体文件所在的位置），例如。@font-faceurl("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 Packages

Google 正式拥有 Bower 和 NPM 依赖项选项 - 遵循 Material Icons Guide 1

使用鲍尔 ：bower install material-design-icons --save

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

材质图标 ：或者查看材质设计图标字体和CSS框架，以便从@marella https://marella.me/material-icons/

注意

似乎谷歌有低维护模式的项目。在撰写本文时，上一个版本是3年前！

GitHub上有几个关于这个问题，但我想参考@cyberalien关于这个项目是否积极维护？#951的评论，它指的是几个分叉并继续维护材料图标的社区项目。

答案 2

我正在为Angular 4/5构建，并且经常离线工作，因此以下内容对我有用。首先安装 NPM：

npm install material-design-icons --save

然后将以下内容添加到样式中.css：

@import '~material-design-icons/iconfont/material-icons.css';