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

Question

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?

"Invalid version tag", can you show your html/css? (Where you call the font and call bootstrap) — Thomas Rbt, Mar 30 '17 at 08:14
@Thomas Rbt bootstrap is working fine, aside from the glyphicons — Marcus H, Mar 30 '17 at 08:25

score 2 · Answer 1 · answered Mar 30 '17 at 08:08

2

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

answered Mar 30 '17 at 08:08

Vaishal Patel

399
4
24

i am using this exact path: /public/css/fonts/glyphicons-halflings-regular.woff – Marcus H Mar 30 '17 at 08:12
Could you post your webpack.config.js. – Vaishal Patel Mar 30 '17 at 08:14
@MarcusH where would the css be located ? – Vaishal Patel Mar 30 '17 at 08:15
im not sure i have one, the project creator is using something called "gulp" is that what you need? – Marcus H Mar 30 '17 at 08:16
the css is located in "style.css" and all the files are scss files, which is also completely new to me :) – Marcus H Mar 30 '17 at 08:16
Try and re-install the font files. – Vaishal Patel Mar 30 '17 at 08:28
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/139464/discussion-between-vaishal-patel-and-marcus-h). – Vaishal Patel Mar 30 '17 at 08:29
Solved it, i had to create a folder with the font-family name – Marcus H Mar 30 '17 at 11:19

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

1 Answers1

Linked