Skip to content

icon font and google translate are not best friends #11

libc opened this Issue Feb 13, 2013 · 2 comments

3 participants

libc commented Feb 13, 2013

Hey guys,

For example,

as you can see most of the icons are distorted.

We found that issue when @bartjo tested the new new address book, and as it happens he also had auto-translate from French to English enabled. There was a location icon on the page, which is denoted by the letter L. Google translate decided to translate it to "the", which resulted in 3 icons appearing, instead of one location icon.


The solution could be private range in Unicode.

It would also not be read by screen readers. (Good for accessibility)


Hi @libc, hi @tregagnon

A simple solution is to add the aria-hidden="true" to the icon tag:

<i class="vicon" aria-hidden="true">c</i>

And to prevent Google Translate from translating the characters:

<i class="vicon notranslate">c</i>

Of course both can be combined:

<i class="vicon notranslate" aria-hidden="true">c</i>

That’s quite heavy...

When we completely drop IE 7 support, then we can use the private unicode range with CSS generated content (:before or :after). We’ll be able to use icons this way for example to display a “settings” icon:

<i class="vicon settings"></i>

It will be much cleaner!



@blustemy blustemy closed this Apr 25, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.