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 Advanced Selectors Pseudo-Elements: ::before and ::after

Ryan Malkmus
Ryan Malkmus
2,053 Points
Posted by Ryan Malkmus
Ryan Malkmus
2,053 Points

How do you get CSS to display a phone icon?

#phone::before {
    content: "\f095";
    font-weight: normal;
    text-decoration: inherit;
    font-size: 18px;
    position: absolute;
}

This code above just displays a box beside my element. It almost works, but there is no icon. Do I have to link something in my markup in order for this to work?

2 Answers

Ricky Walker
Ricky Walker
12,863 Points
Ricky Walker
Ricky Walker
12,863 Points

It appears the unicode that you are using isn't rendering properly. What browser are you trying it in? Have you tried a different phone unicode number like "\2706"? The only thing you would have to link in your markup is the CSS file for the unicode.

Ryan Malkmus
Ryan Malkmus
2,053 Points
Ryan Malkmus
Ryan Malkmus
2,053 Points

Ricky, thank you! "\2706" did work (using chrome by the way). I'm sorry, should have tried that code before asking for help. I think that's the one that the treehouse guy used in the video. I found that unicode from http://astronautweb.co/snippet/font-awesome/. I wonder if that is something that would need to be linked??? What do you think?

Ricky Walker
Ricky Walker
12,863 Points
Ricky Walker
Ricky Walker
12,863 Points

No problem! I think since it's custom unicode, you'll have to use the font family 'FontAwesome' and link to it from the github page. I'm not 100% sure as I'm a beginner as well but you might have to link in your markup to get the 'FontAwesome' to work in your css.