Forum How do I...?

Loading Custom Font Awesome

herold
I would like to load a custum font (Font Awesome) in order to use specific icons in my document. I have the following code and I see only a '?' where the icon should be.

@font-face {
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
url("//fontawesome-webfont.ttf");
}

.fa {
font-family: "FontAwesome";
display: inline-block;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.fa-icon1:before {
content: "\f00b";
}
mikeday
Can you check if Prince is loading the font by running with the --debug option and checking the output log? Also, does the font have a Unicode mapping for U+F00B? How about regular ASCII characters like A-Z?
herold
Thank you for the quick reply. Will check and report back. Here is the link to the font:
http://fontawesome.io/
herold
Here is the link to the character mapping you asked for:
http://fontawesome.io/cheatsheet/
herold
Using this code worked:

@font-face {
font-family: "FontAwesome";
src: url("whatever/fontawesome-webfont.woff?v=4.0.3") format("woff");
font-weight: normal;
font-style: normal;
}