Bootstrap glyphicons (fonts/****.woff) not loading

问题:

I am an error getting that looks like this in my Google chrome(56.0.2924.87) console while trying to use bootstrap glyphicons

Even though i have my .woff files and .ttf files located in my "public/css/fonts" folder.

Addtional Information

I am using Wampserver with apache(2.4.23)

I installed bootstrap.css with "npm install bootstrap"

This is what my font-face looks like

@font-face {
  font-family: 'Glyphicons Halflings';
  font-style: italic;
  src: url('/public/css/fonts/glyphicons-halflings-regular.eot');
  src: url('/public/css/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/public/css/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('/public/css/fonts/glyphicons-halflings-regular.woff') format('woff'), url('/public/css/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('/public/css/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');

}

I try to call the glyphicons like this:

<i class="glyphicon glyphicon-chevron-left"></i>

Does anyone have any idea where this problem might be located?

回答1:

Double check @font-face location path and also the mime type.