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
Oli Treadwell
3,927 PointsCSS Foundations > Web Typography > Web Fonts
Hi all,
I'm within the Web Fonts video with Guil Hernandez and am trying to make use of the @font-face rule to include the CSS3 logo at the top of the page.
RELEVANT @font-face rule
@font-face { font-family: 'icomoon'; src:url('icons/icomoon.eot'); src:url('icons/icomoon.eot?#iefix') fontmat('embedded-opentype'), url('icons/icomoon.woff') format('woff'), url('icons/icomoon.ttf') format('truetype'), url('icons/icomoon.svg#icomoon') format('svg'); }
When I use the pseudoelement described
RELEVANT selector
wrap:before { content: "\e600"; font-family: 'icomoon'; }
I end up with a small square icon rather than the CSS3 Icon.
I'm unsure why this is happening and being new to this, can't understand specifically what it will take to resolve the issue.
I'm on a Macbook Pro running OS X Mavericks viewing the .html file in the latest released version of chrome.
Thanks for your help.
p.s. This is my first post. Are there any other rec'd pieces of information that I am forgetting? Credit Cards? SSN? Stuff like that :P
4 Answers
Kevin Korte
28,148 PointsThere are a few things that could be wrong, and need to be checked.
1) Make sure you that your src url for your font-face rule is correctly pointing to the font files based on your specific structures. A very common structure is that in your css styles are in a css folder, and your font files are in a font folder, both on the server root, and so that would make your url (../fonts/fontfile.eot).
Many times the URL that icomoon gives you will have to be customized for your set up. Your URL that you have now means that your font files are in the same directory as your CSS file. Is that the case?
2)Make sure that '\e600' is the correct code for that icon font. You can verify that from the icomoon app, which is usually the easiest way.
Start with those two and go from there. 99% of the time one or both are wrong.
James Barnett
39,199 PointsIt's a lot easier to use icon fonts than to external fonts via something like icomoon. Here's a quick demo http://codepen.io/jamesbarnett/pen/mqFcb
Gavin Foster
135 PointsI'd perhaps consider creating and SVG logo rather than using an icon font. There's a myriad of ways to import an icon font shape into your vector artwork package (often just by copying and pasting). You can then export the file as a .svg file and you'll have a scalable crisp logo you can just drop into your html like so:
<img src="images/logo.svg" />
SVG images are supported by all modern browsers, however some legacy browsers, especially internet explorer won't recognise them. You can easily create a .png fallback for those browsers. Here's an easy way to do that:
http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/
The first techniques requires the use of modernizr and jQuery. However further down there's a method that requires neither of these.
James Barnett
39,199 PointsI'd perhaps consider creating and SVG logo rather than using an icon font.
Not sure why, icon fonts are easier to style, there are entire themed sets already created, are 10% of the size.
Here's a great article the comparing SVGs and icon fonts
Gavin Foster
135 PointsI guess that would depend on whether or not you're including more than one icon in the icon font. If loading up a bunch of icons just to target one icon for a logo, still think SVG would be the way to go, unless you're using the icons elsewhere. It's likely the SVG will be smaller (but again depends on the complexity of the logo). Then again (see, you've got me thinking now!) using a CDN to load up an icon font stack may be quicker, even with multiple icons. As a general rule I'll use SVG for specifics (kinda like treehouse has done with various inline SVG icons) and a broader icon set for UI for example.
James Barnett
39,199 PointsIf loading up a bunch of icons just to target one icon for a logo, still think SVG would be the way to go, unless you're using the icons elsewhere. It's likely the SVG will be smaller (but again depends on the complexity of the logo).
That's not the case according to this http://blog.pictonic.co/post/32869817328/svgs-are-cool-but-icon-fonts-are-just-10-of-their
Gavin Foster
135 PointsThe article (as far I understand it) is comparing loading an icon font of 25 icons and comparing that with the same number of icons in SVG format:
"Binary formats are quite a bit more efficient than text formats, so the actual file size of a ttf font will often be many times smaller than the aggregate file size of equivalent icon svgs..."
So yes, like for like in that case the font will be smaller. However loading in the 25 icon font file just to use a single icon for a logo I doubt would be faster than using that same single icon as an SVG for your logo and not loading the icon font at all. Two caveats as I mentioned in my earlier comment 1) depends on the complexity of your logo (more complexity=greater file size), 2) depends on whether you are using the other 24 icons elsewhere.
Don Chedele
7,676 PointsI just spent an hour trying to figure out the same problem you had.
I started over deleted everything. I believe my problem was that I used icon instead of icons as a file path.
James Barnett
39,199 PointsJames Barnett
39,199 PointsRegarding the file paths Kevin Korte mentioned maybe this diagram will help.
If you are still confused check out this tutorial on file paths