如何离线托管材质图标? [英] How to host material icons offline?

问题描述

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

的情况下使用谷歌材料图标

?

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

解决方案

方法 2. 自托管 开发者指南

从github下载最新版本(资产:zip文件)，解压，并将包含材料设计图标文件的字体文件夹复制到您的本地项目中 -- https://github.com/google/material-design-icons/releases

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

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

<块引用>

@font-face {font-family: '材质图标';字体样式:正常；字体粗细:400；src: url(iconfont/MaterialIcons-Regular.eot);/* 对于 IE6-8 */src: local('材质图标'),local('MaterialIcons-Regular'),url(iconfont/MaterialIcons-Regular.woff2) 格式('woff2'),url(iconfont/MaterialIcons-Regular.woff) 格式('woff'),url(iconfont/MaterialIcons-Regular.ttf) 格式('truetype');}.material-icons {font-family: '材质图标';字体粗细:正常；字体样式:正常；字体大小:24px；/* 首选图标大小 */显示:内联块；行高:1；文本转换:无；字母间距:正常；自动换行:正常；空白:nowrap；方向:ltr;/* 支持所有 WebKit 浏览器.*/-webkit-font-smoothing:抗锯齿；/* 支持 Safari 和 Chrome.*/文本渲染:优化易读性；/* 支持火狐浏览器.*/-moz-osx-font-smoothing:灰度；/* 支持 IE.*/字体功能设置:'liga';}

---

face

---

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/

---

注意

<块引用>

似乎谷歌的项目处于低维护模式.最后在撰写本文时，发布时间是 3 年前！

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

---

My apologies if this is a very simple question, but how do you use google material icons without a

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

?

I would like my app to be able to display the icons even when the user does not have an internet connection

解决方案

Method 2. Self hosting Developer Guide

Download the latest release from github (assets: zip file), unzip, and copy the font folder, containing the material design icons files, into your local project -- https://github.com/google/material-design-icons/releases

You only need to use the font folder from the archive: it contains the icons fonts in the different formats (for multiple browser support) and boilerplate css.

• Replace the source in the url attribute of @font-face, with the relative path to the iconfont folder in your local project, (where the font files are located) eg. 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 Packages

Google officially has a Bower and NPM dependency option -- follow Material Icons Guide 1

Using bower : bower install material-design-icons --save

Using NPM : npm install material-design-icons --save

Material Icons : Alternatively look into Material design icon font and CSS framework for self hosting the icons, from @marella's https://marella.me/material-icons/

---

Note

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.

---

这篇关于如何离线托管材质图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！