Demo page. Text crossed with icons.

[trykickoff]

Demo page. Text crossed with icons.

[mrmartineau]

Thanks @minskster, I'll look into it tomorrow.

[legomushroom]

I think this is related. Mac OSx Chrome 31.0.1650.63. Welcome to the world of icon fonts I guess ;)

[mrmartineau]

Yes I'm actually working on this right now. I think the original issue was due to different font metrics between browsers.. I am using the Entypo font so now need to convert it again..

[legomushroom]

There are a lots issues with icon fonts - they are too influenced by browsers or even os' they are running on. That's why I've came to the solution not using them at all and use a svg instead) The interesting thing about my screenshot is - some icons are still present(components icon and social icons at the bottom of the page are ok). So, there is a question - you are using a couple of different icon fonts? If not it is probably encoding issue, so try to change characters for the icons.

[mrmartineau]

I updated the icon font and they changed the mappings so they are all incorrect. I am about to try another verson now.

Also, I agree with you about icon fonts to an extent; they are sometimes more hassle than they're worth but I find I choose a different solution depending on what I need.

[mrmartineau]

All fixed now. To those that care, I converted the Entypo font again using the Font Squirrel webfont generator making sure that the 'Fix vertical metrics' checkbox was checked. Also, because Entypo uses much of the private font namespace, I unchecked the Subsetting option so that any char was used.

I have checked in the offending browsers and they look much better now. Let me know if this is not the case.

[legomushroom]

Everything is fine for me too, thank you! Take a look at iconmelon it is more platform independent, so can save a lot of your time) Cheers!

[mrmartineau]

Thanks @sol0mka, iconmelon looks interesting, I hadn't seen it before