37

当 Google 的 JS 无法将它们转换为图标时，如何防止出现实质性图标文本？

图标在标记中定义如下：

<span class="material-icons">icon_name</span>

示例：https ://archive.fo/CKqKG/scr.png （参见最上面一行的按钮）。

材质图标文档：https ://material.io/icons/

这也是谷歌搜索中的一个问题，谷歌实际上会读取并保存 div 的文本，而不是忽略它。

示例：https ://i.imgur.com/TixS06y.png

我知道一种解决方案是简单地切换到 .PNG（由 Google 提供）。我想做任何能减少用户系统（网络）负载的事情。

谢谢！

4

13 回答 13

14

您可以使用font-display: block;，只需将此 CSS 添加到您的 HTML 头部：

<style>
   @font-face {
      font-family: 'Material Icons';
      font-display: block;
    }
</style>

更多信息字体显示

于 2018-11-14T13:45:00.543 回答
8

我一直在为类似的情况而苦苦挣扎：我的问题不是图标从未加载，只是它们可能需要一段时间才能在较慢的连接上加载，直到它们加载丑陋的、无格式的文本（例如，sentiment_very_satisfied）才会显示在页面上（通常比周围的文本大很多倍，也使它非常明显）。

这里的其他解决方案对我不起作用（包括font-display:block我认为可能很有希望的解决方案），所以我使用 CSS 和 jQuery 提出了自己的解决方案。我相信你可以很容易地调整它以使用 vanilla JS。

CSS：

.material-icons{
    opacity:0;
}

jQuery：

$(window).load(function() {
    $('.material-icons').css('opacity','1');
});

这里的诀窍是，与更常用的$(document).ready()侦听器不同，$(window).load()它在触发之前等待页面的所有元素都下载完毕。在这种情况下，这意味着在下载图标字体之前它不会改变图标的​​不透明度。

缺点是图标在页面上的所有内容都被下载之前不会显示，但这是我愿意做出的权衡，以避免在加载图标字体之前在我的页面上看到大量文本。

（我还为 CSS 添加了一个过渡，.material-icons{transition:opacity 0.5s;}这样它们就显得漂亮而流畅了。）

于 2019-01-30T21:49:49.203 回答
6

如果您使用的是 Typekit 的webfont loader，您可以在 web 字体加载或加载失败时应用条件类来隐藏图标，例如：

.wf-loading, .wf-materialicons-n4-inactive {
  .material-icons {
    display: none;
  }
}

您当然可以根据您的喜好应用其他样式技术以获得最佳效果，例如font-size: 0;，这将取决于您的站点和用例。

要使用 webfont 加载器加载材质图标，请使用如下配置：

window.WebFontConfig = {
  google: {
    families: [
      'Material Icons',
    ],
  },
};
于 2017-11-04T20:15:06.803 回答
4

正确的解决方案是添加相同字体大小的最大宽度并将溢出设置为隐藏。

.material-icons {
    max-width: 16px;
    overflow: hidden;
}
于 2020-04-12T20:12:50.847 回答
2

我面临同样的问题。不过，我相信使用像 i.material-icons:before 这样的伪选择器会有所帮助。有关更多信息，请参阅此内容。

---- 编辑：工作示例

i.material-icons:before{display:none;}

于 2017-08-29T21:19:08.013 回答
2

如果您使用的是 angularjs，修复可能是

<i class="material-icons-outlined" ng-bind-html=" 'icon_text' "></i>

或者如果您使用的是 jquery，那么

HTML

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

jQuery.onLoad

$('[material-icons]').each(function(){
  var icon_text = $(this).attr('material-icons');
  $(this).html(icon_text)
});

页面加载后出现图标。

于 2019-07-02T06:27:19.340 回答
1

不是修复，但在支持预连接的浏览器上，您可以尝试尽快加载字体。应该有助于减少在慢速连接上显示文本和图标之间的时间。

<link rel="preconnect" href="//fonts.googleapis.com">
<link rel="preconnect" href="//fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
于 2019-05-16T13:13:42.343 回答
0

我发现如果您&display=swap在链接标记中的 href 末尾插入 - 会有所帮助，如下所示：

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

这是一个供参考的链接

于 2021-02-15T17:39:48.437 回答
0

我们可以先使用 css 将图标的透明度归零，然后在 3 秒后使用addClass.

var delayInMilliseconds = 3000;
setTimeout(function() {
var element = document.getElementById("mayicons");
  element.className +="ops1";
}, delayInMilliseconds);
.material-icons {
    width: 26px;
    height: 30px;
    overflow: hidden;
    opacity: 0;

}

.ops1{
    opacity: 1;
}
<i id="mayicons" class="material-icons ">list</i>

于 2021-03-06T07:56:34.047 回答
0

这是我设法最小化这个问题的方法。但请注意，它仅适用于 Chrome 和 Edge，否则它将退回到通常的行为。通过使用 document.fonts.onloadingdone 我检查我想要的字体是否已加载。如果它被加载，我将创建一个类，它将类“material-icons”的不透明度变为 1，该类最初在 css 中设置为 0。

在一个 css 文件上，我编写了这个规则（它将被最终在脚本中定义的类覆盖）

.material-icons { opacity: 0 };

我在我的 index html 页面中添加了一个脚本标签。

  <script>
    // This executes on chrome and EDGE only as tested
    document.fonts.onloadingdone = function (fontFaceSetEvent) {
      // console.log(fontFaceSetEvent.fontfaces) to see the available fonts which have been loaded
      // and change the font family name according to your font family requirement
      const fontName = 'Material Icons';
      if (fontFaceSetEvent.fontfaces.filter(i => i.family === fontName).length > 0) {
        addMakeIconsVisibleClass();
      }
    };

    // Fallback - call below function if not chrome (or EDGE)
    if (navigator.userAgent.toLowerCase().indexOf('chrome') === -1) {
      addMakeIconsVisibleClass();
    }

    function addMakeIconsVisibleClass() {
      let style = document.createElement('style');
      style.innerHTML = '.material-icons { opacity: 1 !important }';
      document.getElementsByTagName('head')[0].appendChild(style);
    }
  </script>
于 2021-08-20T23:47:18.813 回答
0

我曾经遇到过同样的问题（TOC），直到我发现IcoMoon可以帮助您为您选择的每个材质图标创建一个带有类名标识符的 css 文件，并且还可以将图标创建为符号 SVG。

让我们看一个例子。

谷歌字体方式（FOUC）

<span class="material-icons">
search
</span>

此代码在图标字体加载时显示搜索词。不过，缓存、预连接、预加载和显示块的一些很好的使用，希望没有人会关注它。

IcoMoon 方式（使用字体）

<span class="icon-search"></span>

在这里您可以注意到没有 FOUC 可能性，因为没有要显示的默认文本。

.icon-search:before {
  content: "\e900";
}

有了这个额外的类，它将保留一个空白空间，直到加载源。

IcoMoon 方式（使用 SVG 符号）

<symbol id="icon-search" viewBox="0 0 24 24">
<path d="M9.516 14.016q1.875 0 3.188-1.313t1.313-3.188-1.313-3.188-3.188-1.313-3.188 1.313-1.313 3.188 1.313 3.188 3.188 1.313zM15.516 14.016l4.969 4.969-1.5 1.5-4.969-4.969v-0.797l-0.281-0.281q-1.781 1.547-4.219 1.547-2.719 0-4.617-1.875t-1.898-4.594 1.898-4.617 4.617-1.898 4.594 1.898 1.875 4.617q0 0.984-0.469 2.227t-1.078 1.992l0.281 0.281h0.797z"></path>
</symbol>

<svg class="icon icon-search"><use xlink:href="#icon-search"></use></svg>

使用这种技术，无需等待字体加载。但是，如果您有大量图标，则 HTML 尺寸会更大并且可能更不易维护。

最后，如果您担心项目的加载时间，您会很高兴知道使用此工具（IcoMoon）您只加载您使用的图标（OMG，这看起来像电视购物广告）。无论如何，以下是要遵循的步骤：

  1. 转到https://icomoon.io/app/#/select/library并使用+ 添加按钮选择材质图标。
  2. 现在选择您要使用的那些图标。
  3. 最后，在底部选择选项Generate Font或Generate SVG。

您将拥有一个 zip 文件，其中包含可以包含在项目中的 css 和字体或包含在 HTML 中的 SVG 路径。

一些额外的参考阅读：

于 2022-02-16T15:40:46.337 回答
0

而不是使用材料图标全文，您可以使用它们相应的十六进制代码点。当然这不是隐藏的，但如果没有加载字体，它只会显示未知的字符符号。

例子：

<i class="material-icons">&#xE87D;</i>

您可以在以下位置找到代码点列表：

https://github.com/google/material-design-icons/issues/813#issuecomment-401601344

或者

https://raw.githubusercontent.com/flutter/flutter/master/packages/flutter/lib/src/material/icons.dart

于 2020-11-26T20:51:38.120 回答
0

在主页上创建一个 div style = "position: absolute; top: -1000px" 并输入所有具有类material-icon或awesome font的项目，如下所示：

<div   style="position:absolute;top:-1000px" >      
<i class="icon material-icons-outlined"  >add_circle</i>
<i class="icon material-icons "  >list_alt</i>
<span class="fas fa-circle fa-stack-2x " ></span>
<span class="fas fa-home fa-stack-1x fa-inverse"  ></span>
</div>
于 2019-11-20T13:30:44.863 回答