Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Design Creating a Custom Icon Font

I can't render the files. Halp!

I have tried my custom font as icons using sass and I've also tried it using spans with classes. No matter what I do I keep getting the little box that shows when a browser can't render a character.

My inspector is showing that the right font family is being used. The console says Failed to load resource: net::ERR_FILE_NOT_FOUND for the ttf and woff fonts.

Here is my .html code:

<i class="bnsdb bnsdb-drop"></i>

and here is the sass:

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

i.bnsdb {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'bnsdb' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@function unicode($str) {
  @return unquote("\"") + $str + unquote("\"");
}

.bnsdb-ankh {
  &:before {
    content: unicode($bnsdb-ankh);
  }
}
.bnsdb-drop-border {
  &:before {
    content: unicode($bnsdb-drop-border);
  }
}
.bnsdb-drop {
  &:before {
    content: unicode($bnsdb-drop);
  }
}

The variables are imported into the main .scss file, which is why it's not included above, but here is the code:

$icomoon-font-path: "/fonts/bnsdb" !default;

$bnsdb-ankh: \e900;
$bnsdb-drop-border: \e901;
$bnsdb-drop: \e902;

I added a class to the icon declaration so I could use the material icon font as well.

4 Answers

Rich Donnellan
Rich Donnellan
25,767 Points

Thanks for editing to include your code!

Silly question: Did you download and place the files where you're referring to them (maybe remove that leading slash?). The error message indicates it can't find the resources.

Unrelated: Have you thought about writing a @each to iterate over your icons? This will DRY up some of that dupe code.

// Updated to output the "\e"
@function unicode($str) {
  @return unquote("\"") + "\\e" + $str + unquote("\"");
}

$icomoon-font-prefix: "bnsdb"; // include at the top and interpolate for all instances

$icons: (
  ankh: 900,
  drop-border: 901,
  drop: 902
);

@each $icon, $unicode in $icons {
  .#{$icomoon-font-prefix}-#{$icon} {
    &::before {
      content: unicode($unicode);
    }
  }
}

Hi Rich,

Yep, the font files are in the specified locations. I kept the styling the same as the instructions from icomoon, just to be sure I didn't mess anything up when trying to implement. Right now I'm relying on sass extensions to keep everything DRY. :D

Rich Donnellan
Rich Donnellan
25,767 Points

It doesn't like the path then. Try removing that forward slash if you're still having problems.

Ah-ha! I found it. The problem was here:

$icomoon-font-path: "/fonts/bnsdb" !default;

I made a rookie mistake and forgot to put the .. before the /

Rich Donnellan
Rich Donnellan
25,767 Points

Awesome! Glad you figured it out! I wasn't sure of your file structuring, so I had to make an "educated" guess.