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

Ossian MacDonald
Ossian MacDonald
2,175 Points
Posted by Ossian MacDonald
Ossian MacDonald
2,175 Points

Trouble with Glyph- Glyph not showing up.

Hi All,

I am just trying to implement a glyph a la the CSS deep dive, but I cannot get the character to show up. I can only see the e000 number that I believe the browser should convert to the glyph. I believe that I have downloaded it correctly. I think there is an issue with my code? Thanks so much!

relevant css

font-face{ font-family: 'icomoon'; src:url('fonts/icomoon.eot'); src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('fonts/icomoon.woff') format('woff'), url('fonts/icomoon.ttf') format('truetype'), url('fonts/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; }

.backarrow{ text-align:center; } /adds back arrow glyph/

.backarrow:before{ content: "e000"; font-family:"icomoon"; }

RELEVANT HTML

<!DOCTYPE HTML> <head> <title>Ossian MacDonald</title> <link href='http://fonts.googleapis.com/css?family=Quattrocento' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Bitter:700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen"> </head> <div class="main"> <body> <h1>Contact Me</h1> <h2> 555.555.5555<br> abc@gmail.com </h2> </div> <div class="backarrow">

</div>

</body>

6 Answers

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

I forked your pen and used an icon font to create the arrow

http://codepen.io/jamesbarnett/pen/dLikp

Ossian MacDonald
Ossian MacDonald
2,175 Points
Ossian MacDonald
Ossian MacDonald
2,175 Points

That did the trick James! That seems more simple than generating the image using a pseudo-class. Are there any benefits to using the 'icomoon' @fontface?

Thank You!

Caroline Hagan
Caroline Hagan
12,612 Points
Caroline Hagan
Caroline Hagan
12,612 Points

Ossian,

Can you possibly post up a live link to the website you are working on, so we can take a look?

Ossian MacDonald
Ossian MacDonald
2,175 Points
Ossian MacDonald
Ossian MacDonald
2,175 Points

Hi Caroline,

It's just a little test project I'm working on, so I don't have it live yet- it's all on my machine. Is there a way for me to share it without it being hosted by a server?

Thanks!

Caroline Hagan
Caroline Hagan
12,612 Points
Caroline Hagan
Caroline Hagan
12,612 Points

Try dropping your code into a Codepen http://codepen.io/ or JsFiddle jsfiddle.net

Ossian MacDonald
Ossian MacDonald
2,175 Points
Ossian MacDonald
Ossian MacDonald
2,175 Points

Great!

I went ahead and set up a codepen. What is the best way to share it here? Do I embed, or just paste the url?

http://codepen.io/ossianmacdonald/details/zGsAi

<p data-height="268" data-theme-id="0" data-slug-hash="zGsAi" data-user="ossianmacdonald" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/ossianmacdonald/pen/zGsAi'>zGsAi</a> by Ossian MacDonald (<a href='http://codepen.io/ossianmacdonald'>@ossianmacdonald</a>) on <a href='http://codepen.io'>CodePen</a></p> <script async src="http://codepen.io/assets/embed/ei.js"></script>

Thanks so much!

Caroline Hagan
Caroline Hagan
12,612 Points
Caroline Hagan
Caroline Hagan
12,612 Points

Hmm try this:

.icon-home:before {
    content: "\e000";
}

This is what is in the download pack style.css

Caroline Hagan
Caroline Hagan
12,612 Points
Caroline Hagan
Caroline Hagan
12,612 Points

Instead of relying just on content attribute in the CSS, they also seem to have a data-icon in the HTML, so I don't know if you're trying a different method perhaps?

Ossian MacDonald
Ossian MacDonald
2,175 Points
Ossian MacDonald
Ossian MacDonald
2,175 Points

Hi Caroline,

Are you looking at the project files for the web fonts CSS deep dive?

I think that they are just using a pseudo class to put the glyph before the wrap div (.wrap:before)? I can't see any references to the glyph font in the HTML. But, then again I am very new to this stuff. Is there something that I am missing?

Thanks so much for going out of your way to help me out. I really appreciate it!

Caroline Hagan
Caroline Hagan
12,612 Points
Caroline Hagan
Caroline Hagan
12,612 Points

No worries Ossian,

I haven't looked at this deep dive, I was just looking at the icomoon website and their documentation, and what they provide in the files when you download from their website.