2

I changed bower.json file to install FontAwesome like below and run npm install. It installed FontAwesome 4.3.0. I added the font-awesome.css by using confg/env/all.js. In the browser I can see the font-awesome.css has added to the html. But I can not see fonts on the web page. By inspecting element I could not found any font loaded.

enter image description here

Fonts are already on fonts folder of font-awesome in my source. enter image description here

Satwik Nadkarny
  • 5,086
  • 2
  • 23
  • 41
Janith Widarshana
  • 3,213
  • 9
  • 51
  • 73

1 Answers1

0

Since I can see the fonts exist in your project structure this appears to be an issue with the font path.

As you can see in the first screenshot the font path is pointed to:

@font-face {
    src: url ('../fonts/fontawesome-webfont.eot

however if you look at your project structure the fonts actually exist in the following location:

@font-face {
    src: url ('../fontawesome/fonts/fontawesome-webfont.eot

You will need to update the font path in your css stylesheet to "../fontawesome/fonts" in order for the font resources to be located and loaded into the browser.

ashk3l
  • 103
  • 1
  • 9
  • Thank You @ashk3l I think that wasn't the error. your answer is not correct. Please check I have set the path correctly. – Janith Widarshana Jun 12 '15 at 04:56
  • 1
    The font path would only be correct if your fonts folder was at the root of your project which it isn't. Here is an example on file paths (https://css-tricks.com/quick-reminder-about-file-paths/) that will help you to understand the problem. I believe you are getting confused because you may believe that the stylesheet is relative to the fonts folder below it but when it is loaded into the browser it is relative to the project root. – ashk3l Jun 19 '15 at 17:52