Google Translate messes up Font Awesome Icons

Question

Я использую шрифты удивительные значки на моем сайте. (http://fortawesome.github.io/Font-Awesome/)

Я также подумываю о добавлении виджета google translate на мой сайт в виде небольшой вкладки внизу, которая предлагает пользователю перевести страницу, если это необходимо.()

Однако, если я запустил свой сайт через google translate, все шрифты awesome icons будут испорчены. Я думаю, что Google пытается перевести значки (так как это по сути только шрифт). Кто-нибудь есть идея предотвратить это?

Вы можете увидеть пример, просто запустив шрифт ужасного сайта с помощью 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 + Шрифт Высокий = Не Удивительный

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

UPDATE:

Приведенные выше примеры работают только для текста внутри атрибутов HTML. Он не включает CSS-контент в атрибуте pseudo :: before.

Так, просто включить библиотеку fontawesome через CDN:

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

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