4

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: enter image description here

In just checked in Firebug and its display in css panel is as below: enter image description here

Please guide how I can fix it.

Thanks for your help and guidance

Toubi
  • 2,469
  • 10
  • 33
  • 49
  • 1
    you need to include the whole directory, or the best way is reference to the external css, which is on fontawesome's server. – Zafar Feb 10 '14 at 01:10
  • @Zafar do you mean include all directory and refer just css file ? Is any other configuration required please ? – Toubi Feb 10 '14 at 01:15
  • 1
    yes. include all directories, and reference only the `font-awesome.css`. no other settings. – Zafar Feb 10 '14 at 01:16
  • @Zafar, thanks. Just one thing please Are all these files and folder required ? It has 4 folders css, fonts, less, scss but I will just use some icons. Anything extra which I can remove for performance ? Kindly guide – Toubi Feb 10 '14 at 01:20
  • 1
    you can remove less and scss as long as you keep the css and fonts folder in there. – Zafar Feb 10 '14 at 01:21
  • @Zafar, sorry asking many questions. In production do I need to replace css and fonts with less and scss ? Actualy I m not sure what less and scss are for ? Can you please guide a little more. – Toubi Feb 10 '14 at 01:23
  • 1
    by that you are good to go production. forget about less and scss. they are what `font-awesome.css` are made from. as long as they are already compiled into .css, you don't need them anymore (unless you make some changes in fontawesome). – Zafar Feb 10 '14 at 01:25
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/47138/discussion-between-toubi-and-zafar) – Toubi Feb 10 '14 at 01:32
  • Reading the docs helps http://fortawesome.github.io/Font-Awesome/get-started/ – Chris Pratt Feb 10 '14 at 01:35

3 Answers3

7

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.

rasyadi
  • 121
  • 4
  • thanks, please guide what for less and scss are ? Do I need to exclude or include any files particuallary in production environment ? – Toubi Feb 10 '14 at 01:26
  • If you use css only, you won't need less and scss directories. These directories are for those who want to use Less and Sass, which are CSS pre-processor and CSS extension respectively. – rasyadi Feb 10 '14 at 01:30
  • @rasyadi, can you fix that link? It seems to be 404ing. We want to make sure that the answers we post are useful in the future. Thanks! – imjared Feb 10 '14 at 01:45
  • Fixed. My apologies for the incorrect URL, I missed the relative path. – rasyadi Feb 10 '14 at 03:35
3

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; 

     }
Sean
  • 427
  • 4
  • 4
0

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.

Umair
  • 11
  • 1
  • 4