如何离线托管Material Design图标？

Question

如何离线托管Material Design图标？

javascriptcssmaterial-designmaterializegoogle-fonts

4

我想为我的离线网站开发项目托管材料设计图标（我将在没有互联网的计算机上部署）。经过我在谷歌搜索，我找到了这个SO答案。但它对我没有用。我的问题是如何让它起作用？如何为我的离线项目托管材料设计图标？

基本上，我从这里下载了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';
}

- Shy

1

你有没有阅读过这个说明？ - Vladislav Kievski

@VladislavKievski 是的，我已经按照“设置方法2.自主托管”部分的步骤进行了操作。您可以从这里下载我的示例小项目。我也复制了上面的代码片段。 - Shy

尝试在文件前面添加类似这样的语句：url("./MaterialIcons-Regular.eot")以及其他所有位置，并查看是否可以正常加载，还要尝试添加引号。 - Kresimir Pendic

@KresimirPendic 但是 ./ 会被添加到 exe 之前。对吧？ - Shy

1

尝试添加 MIME 类型修复，我已经添加了答案。 - Kresimir Pendic

显示剩余2条评论

3个回答

4

原版但轻量的Material Icons

这个轻量级的仓库(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

第二步：

// 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`

更多关于https://material.io/tools/icons/?style=baseline的内容。

- WasiF

2

我认为你从某处下载了错误的文件。这是你需要从中下载正确字体的路径：https://github.com/google/material-design-icons/tree/master/iconfont或者使用我在 GH 存储库中已经起作用的那一个。

此外，你只需要在你的 HTML（PHP）文件中调用一个 CSS，像这样：

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

hth, k

- Kresimir Pendic

@Sie 这取决于您使用的平台，我可以看到对于Ubuntu来说是 /etc/apache2/apache2.conf 但是我不确定，因为我在使用nginx。 - Kresimir Pendic

1

你能分享一下你的URL（如果不是私有或本地主机），这样我就可以看到并尝试调查你的情况吗？ - Kresimir Pendic

嘿，这是本地主机，但让我尝试在Cloudnine服务器上部署它。然后我会给你URL。但是我要迟到上课了，所以我需要一个半小时才能完成。 - Shy

1

嗨@Sie，你可以测试我发送给你的repo pull，这是一个公共HTML文件，可以在此处查看：https://rawgit.com/mkteam/MaterialFontsOffline/f0e2eac5bf1b5c4d8e5e92f3a73a5c9970593dfb/index.html - Kresimir Pendic

你好，这个有效。非常感谢你的帮助。经过一些测试，我得出结论，你替换我的字体文件是真正起到了作用的。所以你能告诉我你从哪里获取这些字体文件吗？ - Shy

显示剩余4条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vladislav Kievski · Accepted Answer

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

将此文件的内容复制到您的自定义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');

第二个例子: 看起来您下载了错误的文件。您需要下载此目录并将其放入您的文件夹中，先前的文件必须被删除。

您的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>