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!