问题
I use font awesome icons on my website. (http://fortawesome.github.io/Font-Awesome/)
I am also thinking of adding the google translate widget to my website as a little tab at the bottom that prompts the user to translate the page if they need to. (https://translate.google.com/manager/website/)
However, if I run my site through google translate, all of the font awesome icons gets messed up. I'm thinking that google tries to translate the icons (since it's essentially just a font type). Does anyone have an idea to prevent this from happening?
You can see an example by just running the font awesome site through 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 = Not Awesome
回答1:
Just add an attribute to your HTML like this:
<div translate="no">Let's keep this in plain English!</div>
or add a CSS class:
<div class="notranslate">Let's keep this in plain English, too!</div>
Both is possible, but the first one is W3C recommended and can by viewed in detail here: http://www.w3.org/International/questions/qa-translate-flag.en
UPDATE:
The above examples only work for text inside of HTML attributes. It does not include CSS content in the pseudo ::before attribute.
So, just include the fontawesome library through CDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
回答2:
Apparently (untested) you can add class="notranslate" to your stylesheet:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" class="notranslate" />
来源：https://stackoverflow.com/questions/29053605/google-translate-messes-up-font-awesome-icons