[FIX] Some custom SVGs in FortAwesome/FontAwesome being blacked out
This was a frustrating one. The majority of my custom SVGs looked great in FortAwesome (paid version of FontAwesome). However, those that had multiple paths or multiple shapes were being blacked out AFTER the preview page.
On the upload/preview page, the icon looked great:
However, as soon as I got back to my kit preview page, I saw it blacked out:
ALL of the icons, including the non-working ones, were made on the same Macbook Pro running Illustrator Creative Cloud edition (latest patches applied).
I was #blessed by the Google gods once again when I discovered my issue was overlapping paths. Illustrator has a fairly easy fix for this. I didn’t want to wait for my graphic designer and I’m no Illustrator expert, but this was pretty simple:
1. Open the svg in Illustrator. 2. ⌘-A or just select everything. 3. Go to Effect -> Pathfinder -> Trim. 4. “OK” the warning. 5. ⌘-S or save a revision.
Boom. Confirmed fixed all my blacked-out SVG issues.
And my custom font is created with no icky black-out.
