Font awesome showing asian signs instead of icons

Question

i'm trying to use Font Awesome but instead of any icons it just displays any asian signs. I downloaded font awsome to by webserver for that. I tried this in 3 different browsers (firefox, opera and chromium) but it is always the same.

A testpage can be seen here: http://2weitweitweg.de/test.html

And here is a screenshot of it: http://postimg.org/image/9yh5p0p97/

Does it show the signs in your browser? Is the problem browser- or server-related? How can i fix it?

bye

Answer 1

I had this problem and it was because I was using old html with a new fontawesome version.

I fixed it by changing:

<i class="fa-bitbucket"></i>

to:

<i class="fa fa-bitbucket"></i>

I.e. I just had to add the default fa class to the element.

The latest version uses the fa prefix but for you, I guess it might be icon instead.

Hope this helps someone out at some stage :-)

Answer 2

Most likely the actual font files are not being found. If you look in the font awesome CSS file you will probably see something like:

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
    [...etc]

This expects to find the font files in a folder called font at the same level that the CSS file is in. For example:

myproject / css
                 / font-awesome.css
                   [...etc]
          / font
                 / fontawesome-webfont.eot
                   [...etc]

If the files are in the correct place it is possible that they are not being loaded because of some problem with permissions or even that you have are using a strange browser that does not properly support @font-face. Of course you can rule out the latter by browsing to the font awesome examples page to see if it displays the icons properly.