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

Design Creating a Custom Icon Font

Posted by Edward Seibert
Edward Seibert
32,055 Points

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
MOD
Rich Donnellan
Treehouse Moderator 27,696 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 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);
    }
  }
}
Edward Seibert
Edward Seibert
32,055 Points
Edward Seibert
Edward Seibert
32,055 Points

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
Treehouse Moderator 27,696 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points

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

Edward Seibert
Edward Seibert
32,055 Points
Edward Seibert
Edward Seibert
32,055 Points

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
MOD
Rich Donnellan
Treehouse Moderator 27,696 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points

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