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 Framework Basics Build a Website with Bootstrap Adding Responsive Classes

Max Weir
Max Weir
14,963 Points
Posted by Max Weir
Max Weir
14,963 Points

glyphicons missing

Downloaded the project files and noticed all the glyphs are now displaying as squares, is there some issue with the path to the fonts?

5 Answers

Jeanie de Beer
Jeanie de Beer
313 Points

I've had a similar issue with FontAwesome. Try declaring the font-family as "glyphicons" for the element that's using the icon.

Here's an example: http://davidwalsh.name/font-awesome-tags. See how he uses the "github" class & declares the font-family? I hope that helps!

Also, the project might be using the glyphicons halflings set, so the name of the actual family might vary.

Max Weir
Max Weir
14,963 Points
Max Weir
Max Weir
14,963 Points

I think it could be that the project itself is out of date and the tags have been tweaked slightly.

Paul Roberts
Paul Roberts
7,928 Points
Paul Roberts
Paul Roberts
7,928 Points

Yeah, its 30/04/15 and the glyphicons are still "out-of-date" squares, downloaded from the Project Downloads folder :(

Lauri Neuding
Lauri Neuding
13,525 Points
Lauri Neuding
Lauri Neuding
13,525 Points

Max, are you using the files for 3-9 or 3-10? The glyphicon-right-arrow works just fine in lesson 3-7 so I tried copying the bootstrap css files over the ones in lesson 3-9, but that did not fix the problem. Per Roberts's suggestion, I checked through the bootstrap css and both @font-face and the class .glyphicons calls out font-family: 'Glyphicons Halflings'; so that's as it should be. However, once I downloaded 3-10 and opened those documents, the silly arrows are showing up as they should be. I don't know what's with 3-9.