cant display Font awesome icons?

Question

I just have started using Font Awesome in my MVC application which already have Bootstrap. I need to use some icons and I have copied font-awesome.css into my project but icons are not visible. I have inlucded only this css, not sure but want to ask if there are some other files to include as well ?

Here is how it is visible in my page:

In just checked in Firebug and its display in css panel is as below:

Please guide how I can fix it.

Thanks for your help and guidance

Answer 1

You need to have fonts directory available and can be accessed in your web server. It is included in the download package from http://fortawesome.github.io/Font-Awesome/

Inside font-awesome.css, it needs to refer to fonts directory in order for it to display the icon image.

Hope this helps.

Answer 2

Also, I have notice that I need to referr to the folder location in the "font-awesome.css" where to find the directory if you created one to hold all the font-awesome files. You can check that to make sure that its looking in the correct place and also make sure you have reference with 'bundles' in the App_Start and Shared/_Layout.cshtml

    @font-face {
      font-family: 'FontAwesome';`enter code here`
      src: url('../Content/fonts/fontawesome-webfont.eot?v=4.2.0');
      src: url('../Content/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../Content/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../Content/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../Content/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
      font-weight: normal;
      font-style: normal; 

     }

Answer 3

Anyone still looking for an alternate answer, this method suggested on another StackOverflow answer solves the issue.

Basically change the Build action on the .eot, .ttf, & .woff files to "Content" instead of the default value of "None". Doing this solved my issue.