Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Foundations Web Typography Web Fonts

Chris Shaffer
Chris Shaffer
12,029 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

> 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,029 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,029 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,029 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.