Font Awesome & Unicode

Question

I\'m using (the excellent) Font-Awesome in my site, and it\'s working fine, if I use it this way:

B

Answer 1

After reading the answer of davidhund on this page I came up with a solution that your web font isn't loaded correctly that me be a issue of wrong paths.

Here is what he said:

My first guess is that you include the FontAwesome webfont from a different (sub-)domain. So make sure you set the correct headers on those webfont-files: "you'll need to add the Access-Control-Allow-Origin header, whitelisting the domain you're pulling the asset from." https://github.com/h5bp/html5boilerplate.com/blob/master/src/.htaccess#L78-86

And also look at the font-gotchas :)

Hope I am clear and helped you :)

On the same page, f135ta said:

...I fixed the issue by uploading the file "fontawesome-webfont.ttf" to my webserver and installing it like a regular font.. I dont know if its part of the pre-req's for using it anyway, but it works for me ;-

Answer 2

Just to add on Jukka K. Korpela answer above, font awesome already defined a css selector "fa". You can simply do <i class="fa">&#xf015;</i> . The catch here is, fa defines the font-style:normal, if you need italic, you can override like <i class="fa" style="font-style:italic">&#xf015;</i>

Answer 3

It does not work, because <i>&#xf015;</i> simply asks the browser to display the Private Use code point U+F015 using an italic typeface. The Font Awesome CSS code has nothing that would affect this. If you add class=icon-home to the tag, you will get the glyph assigned to U+F015 in the FontAwesome font, but you will get it twice, due to the way the Font Awesome trickery works.

To get the glyph just once, you need to use CSS that asks for the use of the FontAwesome font without triggering the rules that add a glyph via generated content. A simple trick is to use a class name that starts with icon- but does not match any of the predefined names in Font Awesome or any name otherwise used in your CSS or JavaScript code. E.g.,

<i class=icon-foo>&#xf015;</i>

Alternatively, use CSS code that sets font-family: FontAwesome and font-style: normal on the i element.

PS. Note that Private Use code points such as U+F015 have, by definition, no interoperable meaning. Consequently, when style sheets are disabled,  will not be displayed as any character; the browser will use its way of communicating the presence of undefined data, such as a small box, possibly containing the code point number.