问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何离线托管素材图标？

社区维基
1
新手上路，请多包涵

如果这是一个非常简单的问题，我深表歉意，但是您如何使用没有

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

?

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

原文由 Luke Tan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascripthtmlcordovamaterialize
阅读 680
2 个回答
得票最新
社区维基
1
✓ 已被采纳

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

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

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

  • 将 @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';
> }
>
> ```

* * *

face

”`

NPM / Bower 包

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

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

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

Material Icons : 或者，从@marella 的 https://marella.me/material-icons/ 中查看 Material design 图标字体和 CSS 框架，用于自托管图标

笔记

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

GitHub 上有几个关于此问题的问题，但我想参考@cyberalien 对该问题的评论 Is this project actively maintained? #951 其中提到了几个社区项目，这些项目分叉并继续维护材料图标。

原文由 bfmags 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

添加这个以防它对某人有帮助……这可能不适用于您的用例，但它可能适用于某人。我有一台离线计算机，我在其中使用了一个使用物化的应用程序。我也在尝试解决这个问题，但是 github 存储库很大，而且我很难按照所有说明进行操作。此外， <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 标签正在减慢我的应用程序在离线计算机上的打开速度，因为它一直试图下载该文件，但不能。

这是我所做的（此评论底部的工作示例）

  1. 在 https://fonts.googleapis.com/icon?family=Material+Icons 下载文件并将其作为本地 css 文件存储在您的网站目录中。 此文件需要进行一次修改，如步骤 3 中所述。
  2. 在 --- 中添加一个 <link> index.html ，指向您在步骤 1 中保存的文件。（例如，我保存了 https://fonts.googleapis.com/icon?family=Material+ 我网站目录中 assets/css/materialize_offline_files/materialize-icons.css 的 图标，然后将其添加到 index.html： <link href="assets/css/materialize_offline_files/materialize-icons.css" rel="stylesheet"> rel="stylesheet"> 。） 注意：确保在您的 materialize.css 导入之前添加此链接标签.
  3. 从步骤 1 修改到文件。 如果您查看 https://fonts.googleapis.com/icon?family=Material+Icons 上的文件，您会发现这行 css 代码用于回退字体： src: url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2'); 。 在该 src url 下载文件 https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 ，将其保存到与 materialize_icons.css 相同的目录（来自步骤 1 的文件），并将该行代码更改为： src: url("flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2');

工作示例（4 个文件）：

索引.html

 <!DOCTYPE html>
<html>
<head>
    <link href="assets/css/materialize_offline_files/materialize-icons.css" rel="stylesheet">
    <link href="assets/css/materialize.min.css" rel="stylesheet">
</head>
<body>
    <button class="btn waves-effect waves-light">Hello!
            <i class="material-icons right">send</i>
    </button>
</body>
</html>

资产/css/materialize_offline_files/materialize-icons.css

 /*
 * File downloaded from https://fonts.googleapis.com/icon?family=Material+Icons
 * with slight modification (src url of fallback font)
 */

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  /**src: url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');*/
  src: url("flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2');
  /**
   * flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 is the file
   * downloaded from
   * https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2
   * NOTE:: css src url attributes are relative to the css file,
   * so store flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2
   * IN THE SAME DIR as this css file, for that modification to work.
   */
}

.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;
}

最后（剩余 2 个文件），确保您拥有以下文件：

我认为这只会消除调用 fonts.googleapis.com 减慢我的应用程序的问题，但实际上我使用的几个图标现在实际上出现在离线计算机上。我不确定它是否适用于所有图标，但它对我有用。

原文由 bikz 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题