Font Awesome "font-family" issue

[Mikkel Sandberg]

TL;DR Don't use the "fa" class when using your own glyphs in conjunction with Font Awesome.

This is not so much a problem as it is a solution, but I felt I should post it anyway because I spent a stupid amount of time trying to figure out why the hell my custom fonts weren't displaying properly using FA classes.

A little background:

I was trying to set up a custom font set to be able to use with official Font Awesome glyphs, that way I can use FA classes and stuff like that. I was having a hell of a time trying to get my glyphs to display properly (they just displayed as black rectangles). Just as a sanity check, I added an official FA glyph to my test page, and that displayed properly. I was really hating my life at this point. Long story short, I opened the dev tools in Chrome and noticed a line coming from the styling for FA: "font: normal normal normal 14px/1 FontAwesome;" (emphatic emphasis added for emphasis). This one line breaks EVERYTHING (at least, for these custom fonts; it's essential for FA). 

So there you have it boys and girls: don't use the "fa" class when trying to use your own glyphs along with Font Awesome. I'm sure a similar approach is necessary for other font packs.

This may have been an obvious solution for an easy problem, but I'm sure there is someone else out there like me who was this close to smashing their forehead into their keyboard repeatedly.

Hope this helps :)

[Keyamoon]

Thank you for sharing this information.