【问题标题】：How to host Material Design icons offline?如何离线托管 Material Design 图标？
【发布时间】：2018-03-14 08:06:27
【问题描述】：

我想为我的离线 Web 开发项目离线托管 Material Icons（我不会在部署的计算机上连接互联网）。从我的谷歌搜索中，我找到了this SO answer。但它不适合我。我的问题是如何使它工作。如何为我的离线项目离线托管 Material Design 图标？

我已附上a .zip file of my SSCCE project, which reproduces the problem, here。

基本上我从这里下载了MaterialIcons-Regular.eot、MaterialIcons-Regular.ttf、MaterialIcons-Regular.woff 和MaterialIcons-Regular.woff2 并将它们放在我的项目目录中。

这是我的索引文件：

<!DOCTYPE html>

<html>

<head>
    <title>MaterializeTest</title>

    <link rel="stylesheet" href="material-fonts.css" />
    <link type="text/css" rel="stylesheet" href="materialize.min.css" />

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width; initial-scale=1"/>

    <script src="jquery.min.js"></script>
    <script src="materialize.min.js"></script>
</head>

<body>
    <a href="#!"><i class="material-icons">chevron_left</i></a>
</body>

</html>

这是 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';
}

【问题讨论】：

你读过这个instruction吗？
@VladislavKievski 是的，我遵循了“设置方法 2。自托管”部分。您可以从here 下载我的示例小项目。上面的代码sn-ps我也复制了。
尝试添加这样的文件：url("./MaterialIcons-Regular.eot") 和所有其他位置.. 看看它是否加载正常，也尝试添加引号
@KresimirPendic 但是./ 被添加到exes 之前。不是吗？
尝试添加 mime 类型修复，我添加了较低的答案

标签： javascript css material-design materialize google-fonts

【解决方案1】：

添加图标的第一种方法如下：

将此文件的内容复制到您的自定义 css 文件（例如 material-fonts.css）https://fonts.googleapis.com/icon?family=Material+Icons

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v29/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;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

从 src url 复制链接并将其放入浏览器中。它将下载文件。您需要将其文件放在保存第一个文件（material-fonts.css）的同一目录中。
将 material-fonts.css 文件中的 src: url() 更新为 src: url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');

第二个例子： 看起来你下载了错误的文件。您需要下载此directory 并将其放入您的文件夹中，之前的文件必须删除。

您的 materialFontTest.php 应如下所示：

<!DOCTYPE html>

<html>

<head>
<title>MaterializeTest</title>

<link rel="stylesheet" href="material-icons.css" />

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>

<script src="jquery.min.js"></script>
<script src="materialize.min.js"></script>
</head>

<body>
<a href="#!"><i class="material-icons">chevron_left</i></a>
</body>

</html>

【讨论】：

我无法解释第二点。你能重新检查一下吗。我认为有错别字。它是语法和语义上不清楚的句子。谢谢
现在好点了吗？
请查看我的示例项目（演示了问题）here。材质图标未渲染。
我添加了第二个解决方案。可以试试吗？
半小时后可以试一试吗？

【解决方案2】：

我认为您从某个地方下载了错误的文件。这是您必须从以下位置下载正确字体的路径：https://github.com/google/material-design-icons/tree/master/iconfont 或使用我的 GH 存储库中已经为您工作的字体。

另外你只需要在你的 html (php) 文件中调用一个 css，像这样：

<link rel="stylesheet" href="material-fonts.css" />

hth, k

【讨论】：

全局文件是指/etc/apache2/sites-enabled/000-default.conf文件吗？
@Sie 这取决于你所在的平台，我可以看到对于 ubuntu 它是 /etc/apache2/apache2.conf 但我不确定，我在 nginx 上
我使用的是 Ubuntu 16.04 和 Apache2，我在 /etc/apache2/apache2.conf 的末尾添加了这些行并重新启动了 apache。但我仍然有同样的问题。材质图标未呈现。
你能分享你的网址（如果它不是私人的或本地主机的），以便我查看并尝试调查你的情况吗？
嗨@Sie，你可以测试我发送给你的repo pull，这是一个有效的公共html文件，你可以在这里看到它：rawgit.com/mkteam/MaterialFontsOffline/…

【解决方案3】：

原始但重量轻的 Material 图标

这个轻量级存储库 (https://www.npmjs.com/package/material-design-icons-iconfont) 是大约 60MB 的原始存储库的一个分支，但它的重量非常轻，因为从原始存储库中删除了不必要的文件。

如何安装？

第 1 步：

// install via bower/npm
bower install material-design-icons-iconfont

npm install material-design-icons-iconfont

第 2 步：

// import or link
@import "~material-design-icons-iconfont/dist/material-design-icons.css";

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

如何使用？

<i class='material-icons'>done</i> // remember to add class `material-icons`

【讨论】：