Question

当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提供）。我想在用户系统上减少（网络）负载时做任何事情。

谢谢！

Answer 1

如果您使用Typekit＆＃39; webfont loader，您可以应用条件类来隐藏加载网络字体时的图标或加载失败，例如：

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

您当然可以根据自己的偏好应用其他样式技术，以获得最佳效果，例如： font-size: 0;，具体取决于您的网站和用例。

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

window.WebFontConfig = {
  google: {
    families: [
      'Material Icons',
    ],
  },
};

Answer 2

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

.material-icons {
    max-width: 16px;
    overflow: hidden;
}

Answer 3

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

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

这里有一个 link 供参考

Answer 4

我正面临同样的问题。但我相信，使用像i.material-icons之类的伪选择器之前可以提供帮助。有关详细信息，请参阅this。

----编辑：工作实例

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

Answer 5

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

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

有关更多信息，font-display

Answer 6

我一直在努力解决类似的情况：我的问题不是图标从不加载，只是它们可能需要一段时间才能加载较慢的连接，直到它们加载丑陋的，未格式化的文本像 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;}添加了一个过渡，因此它们显示的非常流畅。）

Answer 7

如果您使用的是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)
});

图标在页面加载后出现。

Answer 8

这不是一个解决方案，但在support preconnect的浏览器上，您可以尝试尽快加载字体。应该有助于减少在慢速连接上显示文字和图标之间的时间。

<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">

Answer 9

简单的解决方案：

在尚未加载实质图标字体和CSS时，利用 class / css优先级来“隐藏”图标。

为此，创建一个具有display: none风格的类，并将其放在之前{strong> 。加载字体后，.material-icons类的显示属性将覆盖.material-icons的字体，从而显示图标。就是这样。

示例：

display: none

希望这会有所帮助！

Answer 10

在首页上创建div样式=“位置：绝对；顶部：-1000px”，然后输入所有具有Material-icon或超赞字体类的项，如下所示：

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

Answer 11

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

示例：

<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

Answer 12

我们可以先使用 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>

当Google的JS无法转换时，如何防止显示素材图标文字？

12 个答案:

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