Icons being generated as a solid colour

297 views
Skip to first unread message

duckb...@googlemail.com

unread,
Dec 16, 2014, 8:53:14 AM12/16/14
to ico...@googlegroups.com
Hi all,

I'm attempting to create an icon font using IcoMoon but I'm experiencing dificulty generating the font.

The icons that I wish to use exist as *.png images, and following the instructions at http://askubuntu.com/questions/301540/export-image-as-svg-in-gimp I managed to successfully convert them to *.svg files.

When I import icons using the IcoMoon app the icon fonts are initially shown as they should be in the selection screen, and I am able to edit them successfully.

However, when I try to "Generate Font" the icons that I imported are shown as just a solid colour.

To try and rectify this issue I have imported the icons in to Inkscape as *.bmp images, but this yeilded the same result.

I'm not sure if the issue is with IcoMoon or with my way of producing the *.svg files, so I'd be gretful for any tips.

Thanks,
David

Keyamoon

unread,
Dec 16, 2014, 9:15:31 AM12/16/14
to ico...@googlegroups.com
Hi,

I'm not sure if I'm understanding the problem. Attaching a sample SVG which you're having problem with would be helpful. But font glyphs can only have solid colors to begin with. In other words, font glyphs cannot have multiple colors.

duckb...@googlemail.com

unread,
Dec 16, 2014, 10:34:05 AM12/16/14
to ico...@googlegroups.com
Hi Keyamoon,

Thanks for your reply. I'm trying to attach a sample currently, but I cannot see anywhere on here a way to do this...

In the mean time though - the icons in question are of one solid colour (#444444), however what I mean is that the shape of the icon is lost upon creation of the glyph resulting in a square of the same colour.

Keyamoon

unread,
Dec 16, 2014, 10:42:46 AM12/16/14
to ico...@googlegroups.com
No problem. What you described is most likely caused by a white colored square in the background of your SVG.

duckb...@googlemail.com

unread,
Dec 16, 2014, 10:50:15 AM12/16/14
to ico...@googlegroups.com
Ok, so I'm following this guide on creating icon fonts - http://www.webdesignerdepot.com/2013/04/how-to-turn-your-icons-into-a-web-font/

It specifically says to make the background white, however I have also tried with a transparent backgorund and the same result occurs. I do notice on IcoMoon that when I import the background there is a white square around them, dispite my use of a transparent background.

Thanks.

Keyamoon

unread,
Dec 16, 2014, 10:53:45 AM12/16/14
to ico...@googlegroups.com
I see. If you're using a transparent background but it's getting imported as white, there's a bug which I will have to find and fix. If you can send your SVG to me, I'll be able to reproduce the problem and fix it. You could email it to me (keyamoonATgmail). But to get around this issue in the meanwhile, try removing the background.

duckb...@googlemail.com

unread,
Dec 16, 2014, 11:03:48 AM12/16/14
to ico...@googlegroups.com
I'm new to Inkscape, but it looks like it's actually that app which is adding the background when I import a *.png. I didn't notice because the default canvas colour is also white, meaning it is obscured.

I'm currently trying to figure out how to remove this background, but I will send you a example in a moment for your reference so that you can confirm that this is indeed the issue.

Thanks for your help.
Reply all
Reply to author
Forward
0 new messages