Font awesome showing asian signs instead of icons - firefox

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.

Answer 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:

Answer 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

Answer 5

Run the below command
npx react-native link react-native-vector-icons

Answer 6

Using fontawesone 5.15.1 I had to do this to get the Linux icon to show up:
<i class="fab fa-linux icon"></i>
IMPORTANT: using "fab" instead of "fa" as Linux is considered a "brand".