Font awesome showing asian signs instead of icons

问题:

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

回答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 :-)

回答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.

回答3:

Hope I'm not too late, something on your server isn't configured properly, solution is to allow *.woff and *.tff to be requested like static resources just like you do with *.css and *.js, this is done differently depending on platform:

What I did to make it work:

Replaced your stylesheet with (since we can't get to resources):

<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">

And replaced your old icon-* classes, for example:

<i class="fa-umbrella fa text-error"></i>

And now it works:

回答4:

If you using 4.0 or later, they've changed the icon classes to fa classes So your code should say

    <i class="fa fa-camera-retro fa-large"></i>

instead of

    <i class="icon icon-camera-retro icon-large"></i>

You can find icon, specific code examples by visiting http://fontawesome.io/icons/ and clicking/tapping the icon you need.

I had this same issue when upgrading from 3.2 to 4.0.3