Javascript 如何防止在Google'；s JS无法转换它们？

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

图标在标记中定义如下：

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

图标名称

示例：（请参见顶部的按钮行）

材料图标文档：

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

例如：

我知道一个解决方案是简单地切换到.PNGs（由谷歌提供）。我愿意做任何能减少用户系统（网络）负载的事情

---

谢谢

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

----编辑：工作示例

---

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

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

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

当然，您可以根据自己的喜好应用其他样式技术以获得最佳效果，例如

字体大小：0，它将取决于您的站点和用例

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

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

您可以使用
字体显示：block，只需将此CSS添加到HTML头部：

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


@字体{
字体系列：“材质图标”；
字体显示：块；
}

更多信息
我一直在与类似的情况作斗争：我的问题不在于图标从未加载，而在于它们可能需要一段时间才能加载较慢的连接，直到它们加载丑陋、未格式化的文本，如感想，才会在页面上显示“非常满意”（通常比周围的文本大很多倍，因此非常明显）

这里的其他解决方案对我不起作用（包括
font-display:block
，我认为这可能很有前途），因此我使用CSS和jQuery提出了自己的解决方案。我相信您可以轻松地将其调整为使用vanilla JS

CSS:

jQuery：

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

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

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

（我还向CSS
材质图标{transition:opacity 0.5s；}
添加了一个过渡，因此它们显示得很好，很平滑。）
这不是一个修复方法，但在浏览器上，您可以尝试尽快加载字体。这有助于减少在慢速连接上显示文本和图标之间的时间

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

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

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

图标在页面加载后出现。
在主页上创建一个div style=“position:absolute；top:-1000px”，并使用类材质图标或awesome字体输入所有项目，如下所示：

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


加上一个圆圈
列表\u alt
正确的解决方案是添加相同字体大小的最大宽度，并将溢出设置为隐藏

。材质图标{
最大宽度：16px；
溢出：隐藏；
}
您可以使用相应的十六进制代码点，而不是使用材料图标全文。
当然这不是隐藏，但是如果字体没有加载，它只会显示未知的字符符号

例如：

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

和#xE87D；

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


或

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


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


var delayinms=3000；
setTimeout（函数（）{
var元素=document.getElementById（“mayicons”）；
element.className+=“ops1”；
}，延迟单位为毫秒）；
。材质图标{
宽度：26px；
高度：30px；
溢出：隐藏；
不透明度：0；
}
.ops1{
不透明度：1；
}
列表
这可能有助于您指定为什么材质图标无法显示以及为什么它显示为文本？解决方法是什么？材质图标无法显示的原因可能有很多，例如internet连接故障或获取字体文件的请求失败。在这种情况下，如果您使用材质带有连字的图标，当您的代码类似于
face
时，“face”一词将在您的页面上以纯文本形式显示。我的答案中的变通方法会阻止显示此文本。只有在@font-face中指定字体的src，并且不在您的头部使用
@import
或
链接
标记时，此方法才有效。不幸的是，这不是（目前）谷歌字体：注意：字体显示：block将显示一个不可见的字体面，这意味着在加载字体时，将显示一个不可见的文本，该文本的长度与回退文本的长度相同。此连字文本通常比实际字体宽，因此您需要设置一些样式，以便即使它由于字体显示：block，宽度仍然较小，因此没有闪烁。老问题，但对我来说是新问题。您现在可以使用Google fonts指定字体显示属性，因此工作正常。我尝试了您的解决方案，但在网络速度太慢的情况下没有效果。更清楚的是，它将显示block（实际上什么都没有）而不是文本，大约两秒钟，所以当我尝试
快速3G
模式时，它不会向用户显示文本，但对于
慢速3G
模式，问题是
$('[material-icons]').each(function(){
  var icon_text = $(this).attr('material-icons');
  $(this).html(icon_text)
});

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

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