Javascript 如何离线托管材质图标？

Question

提问by Luke Tan

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

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

Answer 1

回答by bfmags

Method 2. Self hostingDeveloper Guide

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

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

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

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

您只需要使用存档中的iconfont文件夹：它包含不同格式的图标字体（用于多浏览器支持）和样板 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 的 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';
}

@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

NPM / Bower 包

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

谷歌官方有一个 Bower 和 NPM 依赖选项——遵循 Material Icons Guide 1

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

使用凉亭：bower install material-design-icons --save

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

使用 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/

Material Icons：或者查看用于自托管图标的 Material design 图标字体和 CSS 框架，来自@marella 的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? #951where it refers several community projects that forked and continue maintaining material icons.

似乎谷歌的项目处于低维护模式。在撰写本文时，最后一次发布是 3 年前！
GitHub 上有几个关于此的问题，但我想参考 @cyberalien 对该问题的评论，Is this project actively maintained? #951其中提到了几个分叉并继续维护材料图标的社区项目。

Answer 2

回答by Richard Bown

I'm building for Angular 4/5 and often working offline and so the following worked for me. First install the NPM:

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

npm install material-design-icons --save

Then add the following to styles.css:

然后在styles.css中添加以下内容：

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

Answer 3

回答by Kaloyan Stamatov

The upper approaches does not work for me. I download the files from github, but the browser did not load the fonts.

上面的方法对我不起作用。我从github下载文件，但浏览器没有加载字体。

What I did was to open the material icon source link:

我所做的是打开材质图标源链接：

https://fonts.googleapis.com/icon?family=Material+Icons

and I saw this markup:

我看到了这个标记：

    /* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.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;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

I open the woff font url link https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2

我打开woff字体url链接https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2

and download the woff2 file.

并下载 woff2 文件。

Then I replace the woff2 file path with the new one in material-icons.css

然后我用 material-icons.css 中的新路径替换 woff2 文件路径

@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'),
       /* Old file: url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), */
       /* load new file */ 
       url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'),
       url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

That makes thing works for me.

这让事情对我有用。

Answer 4

回答by Vladislav Kosovskikh

If you use webpack project, after

如果你使用 webpack 项目，之后

npm install material-design-icons --save

you just need to

你只需要

import materialIcons from 'material-design-icons/iconfont/material-icons.css'

Answer 5

回答by Md. Harun Or Rashid

This may be an easy Solution

这可能是一个简单的解决方案

Get this repositorythat is a fork of the original repositoryGoogle published.

获取这个存储库，它是Google 发布的原始存储库的一个分支。

Install it with bower or npm

用 bower 或 npm 安装

bower install material-design-icons-iconfont --save

npm install material-design-icons-iconfont --save

Import the css File on your HTML Page

在 HTML 页面上导入 css 文件

<style>
  @import url('node_modules/material-design-icons-iconfont/dist/material-design-icons.css');
</style>

or

或者

<link rel="stylesheet" href="node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

Test: Add an icon inside body tag of your HTML File

测试：在 HTML 文件的 body 标签内添加一个图标

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

If you see the face icon, you are OK.

如果您看到面部图标，则说明一切正常。

If does not work, try add this ..as prefix to node_modulespath:

如果不起作用，请尝试将此..作为前缀添加到node_modules路径：

<link rel="stylesheet" href="../node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

Answer 6

回答by Roman

My recipe has three steps:

我的食谱分三步：

to install material-design-icons package
```
npm install material-design-icons
```

to import material-icons.css file into .less or .scss file/ project

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

to include recommended code into the reactjs .js file/ project

<i className='material-icons' style={{fontSize: '36px'}}>close</i>

安装 material-design-icons 包
```
npm install material-design-icons
```

将 material-icons.css 文件导入 .less 或 .scss 文件/项目

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

将推荐的代码包含到 reactjs .js 文件/项目中

<i className='material-icons' style={{fontSize: '36px'}}>close</i>

Answer 7

回答by Jossef Harush

Use material-design-icons-iconfont

使用material-design-icons-iconfont

Full disclosure, I'm the author of this package
Google's material-design-iconsproject is on low maintenanceand out of date for a while. There's a gap between the version in https://material.io/icons/and the version in material-design-icons.

完全披露，我是这个包的作者
Google 的material-design-icons项目处于低维护状态并且已经过时了一段时间。https://material.io/icons/ 中的版本与material-design-icons 中的版本之间存在差距。

I've created material-design-icons-iconfontto address these major issues:

我创建了material-design-icons-iconfont来解决这些主要问题：

material-design-iconsjams npm install- all irrelevant svg/xml/... files has been removed
Font files are always up-to-date straight from Google FontsCDN
Support for scss

material-design-iconsjams npm install- 所有不相关的 svg/xml/... 文件已被删除
字体文件始终直接从Google FontsCDN 更新
支持scss

Install via `npm`

通过安装 `npm`

npm install material-design-icons-iconfont --save

It depends on how you pack your web application (webpack/gulp/bower/...), you'll need to import the .css/.scssfile (and might change the relative fonts path)

这取决于你如何打包你的 web 应用程序（webpack// gulp/ bower...），你需要导入.css/.scss文件（并且可能会改变相对字体路径）

Import Using SCSS

使用 SCSS 导入

Import in one of your sass files

导入您的 sass 文件之一

$material-design-icons-font-path: '~material-design-icons-iconfont/dist/fonts/';
@import '~material-design-icons-iconfont/src/material-design-icons';

Later on, reference your desired icon <i class="material-icons">+ icon-id + </i>

稍后，参考您想要的图标<i class="material-icons">+ icon-id +</i>

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

read the full instructions on material-design-icons-iconfontfor more import methods

阅读关于material-design-icons-iconfont的完整说明以了解更多导入方法

Demo page

演示页面

It comes with a light demo pageto assist searching and copy-pasting fonts

它带有一个简单的演示页面，以帮助搜索和复制粘贴字体

Answer 8

回答by abhinav1602

I have tried to compile everything that needs to be done for self-hosting icons in my answer. You need to follow these 4 simple steps.

我试图在我的答案中编译自托管图标需要做的所有事情。您需要遵循以下 4 个简单步骤。

Open the iconfont folder of the materialize repository
link- [https://github.com/google/material-design-icons/tree/master/iconfont]
Download these three icons files ->
MaterialIcons-Regular.woff2- format('woff2')
MaterialIcons-Regular.woff- format('woff')
MaterialIcons-Regular.ttf- format('truetype');
Note- After Download you can rename it to whatever you like.
Now, go to your CSSand add this code

打开materialize仓库的iconfont文件夹
链接- [ https://github.com/google/material-design-icons/tree/master/iconfont]
下载这三个图标文件 ->
MaterialIcons-Regular.woff2 - 格式（'woff2'）
MaterialIcons-Regular.woff- 格式（'woff'）
MaterialIcons-Regular.ttf- format('truetype');
注意 - 下载后，您可以将其重命名为您喜欢的任何名称。
现在，转到您的CSS并添加此代码

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

Note : The address provided in src:url(...) should be with respect to the 'CSS File' and not the index.html file. For example it can be src : url(../myicons/MaterialIcons-Regular.woff2)

注意： src:url(...) 中提供的地址应该是关于“CSS 文件”而不是 index.html 文件。例如它可以是 src : url(../myicons/MaterialIcons-Regular.woff2)

You are ready to use now and here is how it can be done in HTML

您现在可以使用了，这里是如何在 HTML 中完成的

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

Click hereto see all the icons that can be used.

单击此处查看所有可以使用的图标。

Answer 9

回答by Wlada

With angular cli

带角cli

npm install angular-material-icons --save

or

或者

npm install material-design-icons-iconfont --save

material-design-icons-iconfont is the latest updated version of the icons. angular-material-icons is not updated for a long time

material-design-icons-iconfont 是图标的最新更新版本。angular-material-icons 很久没有更新了

Wait wait wait install to be done and then add it to angular.json -> projects -> architect -> styles

等待等待安装完成，然后将其添加到 angular.json -> 项目 -> 架构师 -> 样式

 "styles": [
          "node_modules/material-design-icons/iconfont/material-icons.css",
          "src/styles.scss"
        ],

or if you installed material-desing-icons-iconfont then

或者如果你安装了 material-desing-icons-iconfont 那么

"styles": [
              "node_modules/material-design-icons-iconfont/dist/material-design-icons.css",
              "src/styles.scss"
            ],

Answer 10

回答by Manolo Alvarez

After you have done npm install material-design-icons, add this in your main CSS file:

完成后npm install material-design-icons，将其添加到您的主 CSS 文件中：

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

Javascript 如何离线托管材质图标？

提问by Luke Tan

回答by bfmags

回答by Richard Bown

回答by Kaloyan Stamatov

回答by Vladislav Kosovskikh

回答by Md. Harun Or Rashid

回答by Roman

回答by Jossef Harush

Use material-design-icons-iconfont

使用material-design-icons-iconfont

Install via `npm`

通过安装 `npm`

Demo page

演示页面

回答by abhinav1602

回答by Wlada

回答by Manolo Alvarez

相关推荐

最近更新

标签

Javascript 如何离线托管材质图标？

提问by Luke Tan

回答by bfmags

回答by Richard Bown

回答by Kaloyan Stamatov

回答by Vladislav Kosovskikh

回答by Md. Harun Or Rashid

回答by Roman

回答by Jossef Harush

Use material-design-icons-iconfont

使用material-design-icons-iconfont

Install via npm

通过安装 npm

Demo page

演示页面

回答by abhinav1602

回答by Wlada

回答by Manolo Alvarez

相关推荐

Javascript 选择另一个复选框时如何启用/禁用复选框？

Javascript 如何解决终端上 Node JS 中的“窗口未定义”错误

Javascript ExtJs4 - 存储 baseParams 配置属性？

javascript 和 php 中的 pancard 结构验证也

相关推荐

最近更新

标签

Install via `npm`

通过安装 `npm`