如何防止當Google的JS無法轉換材質圖標文字？

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

據我所知，一種解決方案是簡單地切換到.PNGs（由谷歌提供）。我想在用戶的系統上以較少的（網絡）負載做任何結果。

謝謝！

Answer 1

我正面臨同樣的問題。不過，我相信使用像i.material-icons這樣的僞選擇器可以提供幫助。有關更多信息，請參見this。

Answer 2

如果您正在使用Typekit的webfont loader，可以申請有條件類隱藏圖標，而Web字體加載，或者如果它未能加載，如：

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

當然你也可以應用其他造型技巧根據您的喜好獲得最佳結果，例如font-size: 0;，這將取決於您的網站和用例。

加載使用web字體加載器材料圖標，使用配置如下所示：

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