谷歌翻译搞砸了字体真棒图标答案

【问题标题】：Google Translate messes up Font Awesome Icons谷歌翻译搞砸了字体真棒图标
【发布时间】：2015-05-17 04:43:13
【问题描述】：

我在我的网站上使用字体很棒的图标。 (http://fortawesome.github.io/Font-Awesome/)

我还考虑将谷歌翻译小部件添加到我的网站，作为底部的一个小标签，提示用户在需要时翻译页面。 (https://translate.google.com/manager/website/)

但是，如果我通过谷歌翻译运行我的网站，所有字体超棒的图标都会被弄乱。我认为谷歌试图翻译图标（因为它本质上只是一种字体类型）。有没有人有防止这种情况发生的想法？

谷歌翻译 + 字体真棒 = 不棒

【问题讨论】：

【解决方案1】：

您可以在遇到问题的地方添加“notranslate”类，例如在我的情况下，问题出在所有材质图标中，然后我使用 Jquery 将“notranslate”类添加到所有材质图标中

$( document ).ready(function() {
$(".material-icons").addClass("notranslate");
});

【讨论】：

【解决方案2】：

显然（未经测试）您可以将class="notranslate" 添加到您的样式表中：

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" class="notranslate" />

【讨论】：

【解决方案3】：

只需像这样在 HTML 中添加一个属性：

<div translate="no">Let's keep this in plain English!</div>

或添加一个 CSS 类：

<div class="notranslate">Let's keep this in plain English, too!</div>

两者都可以，但第一个是 W3C 推荐的，可以在这里查看详细信息：http://www.w3.org/International/questions/qa-translate-flag.en

更新：

以上示例仅适用于 HTML 属性内的文本。它在伪 ::before 属性中不包含 CSS 内容。

所以，只需通过 CDN 包含 fontawesome 库：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

【讨论】：