Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Web Typography Web Fonts

Chris Shaffer
Chris Shaffer
12,030 Points
Posted by Chris Shaffer
Chris Shaffer
12,030 Points

Icomoon Fonts do Not work in Chrome or FF

I carbon-copied the CSS from the video, even loaded the finished file provided and it simply doesn't work.

A blank box is shown instead of the icon.

Might want to review that.

3 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

> even loaded the finished file provided and it simply doesn't work.

I downloaded the project files, opened up index.html in the end directory.

It works fine for me when I open that up locally on Chrome under Windows 7.

Imgur

Chris Shaffer
Chris Shaffer
12,030 Points
Chris Shaffer
Chris Shaffer
12,030 Points

I actually figured out the problem. The Unicode number used seems to change if you download the fonts yourself, which I did.

If you view the demo.html file you can find the proper code, which varies depending on the fonts you select.

That is to say, the HTML5 badge icon isn't the same code in my downloaded fonts as the video or provided files.

Lesson learned!

Chris Shaffer
Chris Shaffer
12,030 Points
Chris Shaffer
Chris Shaffer
12,030 Points

That's actually not the same font. But it looks like this might have been an issue w/Google Fonts only. I'm no longer having this issue.

Chris Shaffer
Chris Shaffer
12,030 Points
Chris Shaffer
Chris Shaffer
12,030 Points

James Barnett I couldn't just download "a font" from Icomoon; rather you choose the icon fonts you want then download that set. Looks like when you do that it varies the Unicode #.

Not sure if that's the case or if the Unicode # has changed since the video was made, but it's different in my download and the example files.

Edit - Just checked the video against Icomoon. Looks like the issue is the fonts in the video now have a different Unicode value. For example, in the video the CSS3 "3 badge" is e002, but it's actually now e602. The font files in the example files are using a different Unicode value, so when I tried my downloaded fonts, it didn't work.