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

Posted by Cheryl Jones
Cheryl Jones
13,405 Points

cannot get foundation icon fonts to work

I just can't get these foundation icons to work - they appear just as a tiny square border. I downloaded the files and put them in my css folder. In my header I've linked the file <link rel="stylesheet" href="css/foundation-icons.css" media="screen"/> and I'm using the right markup <i class="fi-social-facebook"></i>

What am I missing??

2 Answers

Kevin Lozandier
PLUS
Kevin Lozandier
Courses Plus Student 53,747 Points
Kevin Lozandier
Kevin Lozandier
Courses Plus Student 53,747 Points

Hi, @Cheryl Jones:

Can you provide me a snapshot of the way your workspace or folder directory with the files is organizaed, as well as a code block of the .css, .sass, .scss file that has your font-face declaration.

To insert the code block, wrap the code with three grave characters (is the grave character ) and putcss,sass, orscss` after the first three grave characters.

I should be able to see a block like this: 

@font-face {
  font-family: "Foo";
  // this is just a test; 
}
Kevin Lozandier
PLUS
Kevin Lozandier
Courses Plus Student 53,747 Points
Kevin Lozandier
Kevin Lozandier
Courses Plus Student 53,747 Points

That in mind in general you font-face declaration should have the format of url(<location>) format(<filetype extension>): 

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

// You may see the following declared  instead declared called the "smiley face version" 
@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('??'),
         url('GraublauWeb.otf') format('opentype');
}

Alternatively, if you're used to Sass and Compass, you can use the font-face mixin provided by Compass to get the same effect:

Here it is in .scss file:

@include font-face("Blooming Grove", font-files("examples/bgrove.ttf", "examples/bgrove.otf"));

Here's the same mixin used inside a .sass file instead: 

+font-face("Blooming Grove", font-files("examples/bgrove.ttf", "examples/bgrove.otf"))
// or 
@include font-face("Blooming Grove", font-files("examples/bgrove.ttf", "examples/bgrove.otf"))