Search code examples
cssiconsfont-face

Loading icons as a font-family

I have just added a custom .ttf to my web application.

@font-face{
  font-family: 'CustomIcons';
  src: font-url('CustomIcons.ttf') format("truetype");
}

I don't care about browser compatibility yet.

Now that the icons are loaded, I don't know how can I use them. I don't have a css like when adding the FontAwesome icons, so I am not sure about how the mapping is.

Do you know how can I do to know that?

Solution

  • This is the bane of existence for undocumented Icon Fonts.

    If you're looking to see what is mapped to what, this answer from @Omar has a great run down of how to reverse-engineer the weird character mappings.

    Option 2) Use the icomoon app

    Sign up AND create a new project In that project, import your font files (Top left button called "+ Import Icons") Under Fonts (Bottom right option), you'll see the list of all your icons and respective codes. This should work for sure.