Question

我在网站上使用了字体真棒图标。（http://fortawesome.github.io/Font-Awesome/）

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

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

您可以通过google translate运行字体真棒网站来查看示例。（https://translate.google.com/translate?hl=en&sl=en&tl=es&u=http%3A%2F%2Ffortawesome.github.io%2FFont-Awesome%2F）

Google Translate + Font Awesome =不太棒

Answer 1

只需在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">

Answer 2

显然（未经测试）您可以将<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" class="notranslate" />添加到样式表中：

  .state('someState', {
    url: '/someurl',
    views: {
      '' : {
        templateUrl: '/path/to/template.html',
        controller: 'ViewController',
        controllerAs: 'viewCtrl'
      },

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

2 个答案: