Font-Awesome not showing font?

Question

I'm trying to use F-A v4.7 to display some icons. I can't use the CDN because I'm building an intranet site that doesn't have access outside the network. I copied the .css files to my Content folder and the fonts to a directory in the root of the site.

I added the .css to the bundle in my MVC project. I now get the intellisense for the different F-A icons. However, when I browse to the site my sample icon doesn't show.

I looked at the page with the developer tools and I don't have any errors. I edited the .css file and replaced the fonts URL to use "~" instead of ".." but that didn't work.

@font-face {
  font-family: 'FontAwesome';
  src: url('~/fonts/fontawesome-webfont.eot?v=4.7.0');

I did that because my .css file is in root\Content\font-awesome.css and the fonts are in root\fonts\ folder. Using the tilde should make sure it uses the root and then \fonts\ directory.

Still, no errors, no black square where the icon should be. It just doesn't show the icon. In the developer tools I can see what looks to be the correct syntax. <i class="fa fa-print"> FA font</i>

Anyone have any suggestions?

Answer 1

You can download the entire font-awesome and use it inside your project by using link as as usual

Here is the download link : http://fontawesome.io/assets/font-awesome-4.7.0.zip

no need to create it manually

Your <i class="fa fa-print"> FA font</i> would work fine

Answer 2

Personally I wouldn't use @font-face just link directly to your font awesome file in the head of your page before including the css file like so:

<link href="/css/font-awesome.min.css" rel="stylesheet">

Answer 3

I had the same problem.

When I checked the network tab in Chrome I saw a .woff2 file was downloaded. Some web servers don't have the mime-type for .woff2 but the http status was 200, so that wasn't the problem.

On a hunch I decided to delete the part that makes the browser download the .woff2 file in font-awesome.css, and... suddenly all icons showed up!

So apparently, either something is wrong with the .woff2 file or the browser (I am using Google Chrome 56).

But as a temporary workaround you can delete this part from the font-awesome.css:

url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),