icon rendering wrong, recent Update broke icon export

[Kris Meister]

This a file: http://demo.bluestranger.com/tiny/search.svg

was correctly exporting for the last several months.

However, now when we export the font, the Magnifying glass is cut off.

Preview image:

http://demo.bluestranger.com/tiny/preview-looks-good.png

Export image:

http://demo.bluestranger.com/tiny/export-looks-bad.png

This application is mission critical for us, any help will be much appreciated.

Thanks a bunch,

Kris

ps: google groups upload isn't working right now, 503 ???

[Keyamoon]

What Em size are you using? See Preferences > Font Metrics.

[Keyamoon]

Please also check your font in browser's other than Chrome. This cutting off issue seems to be a bug in Google Chrome and if so, I should probably file a bug report. Your feedback would be appreciated.

[Luan]

Hi Keyamoon,

It's displaying properly on FF but not Chrome.

This issue appears not only on the Icomoon app interface, it also happened in our local environment after we replace the new set downloaded from your service.

We need to use the icons for client that needs to support multiple browsers.

[Keyamoon]

Hi Luan,

Changing the Em Square Size (from font tab > preferences > font metrics) to 1024 should solve the problem. You're probably using the old default configuration that uses 512. If you can email your project file to me (you can download it from Main Menu > Manage Projects), I'd be able to further investigate the issue. But it is mostly a bug in Chrome causing it and it would be a good idea to file a bug report. My email is keyamoonATgmail.

[Luan]

Thanks Keyamoon,

It got fixed with your solution. Didn't know that's the trick.

Thanks again.

[gigaf...@gmail.com]

Also happens to me. And setting it to 1024 doesn't solve the problem. Also the icons, besides appearing cut off also look blured...

[Keyamoon]

It's a font rendering bug in Chrome. As you mentioned, other browsers don't have this issue. Try changing the Em Square Height to 1024 or 2048. You can find this option in Font Tab > Preferences > Font Metrics

[Tony Rah]

I have tried setting the Em Square Height to both 1024 and 2048 and nothing works. My icons (specifically checkbox-checked2 and checkbox-unchecked2) are being cut off on the left edge in Chrome 39/40 on OSX. Any other ideas? This really stinks.

[Tony Rah]

I don't like this solution but it's fine for my use case. I noticed the icons that were being chopped took up the entire canvas. By scaling the icon down one notch it solved the problem. I found this in the Font tab > click icon > scale down button on a 16x16 grid.

I would still love to hear a better solution if there is one.

[Keyamoon]

Could you attach a sample SVG to import and reproduce the issue?

[Tony Rah]

Do you have an email I can send it to? I can't attach files in google groups.

[Keyamoon]

Yes, please email it to keyamoonATgmail

[Tony Rah]

Turns out my issue was MY issue (mostly). I was vertically aligning the font icon within a div using the position:absolute;top:50%;tranform:translateY(-50%); trick. The combination of position:absolute and position:relative on the parent was slicing off the left/bottom by 1px when used with a font icon that used it's entire grid. Also, this only happened in chrome. Other browsers weren't effected.

If someone else runs into this I see 3 options. #1: Look at how you are using position and don't do what you are doing. #2: don't use a font icon that takes up the entire grid. #3 (my solution): scale the font icon down so it doesn't take up the entire grid. This can be done in the icomoon app when exporting a font.