How to fix the failed to load resource: 404 (Not Found) error when loading Glyphicons fonts on Bootstrap 3 SASS

Question

I am using Drupal and Bootstrap SASS Theme to develop my website and it is not loading the glyphicons, I am receiving the following error message:

Failed to load resource: the server responded with a status of 404 (Not Found): glyphicons-halflings-regular.woff

I checked my variables SCSS file, and I saw that the $icon-font-path is configured correctly. All bootstrap folders are also in the right place.

It seems that the SASS compiler is ignoring my variables file.

Answer 1

This problem is often related to the loading order of the variables SCSS file. Look for the $icon-font-path in other parts of your file and check if the path is correct in all of them.

After that, change the content of the $icon-font-path to anything, to test if your file is being loaded, reread the error message to see if the path changed.

If it has not changed, it is probably because the loading order of your sass/scss files is incorrect. The compiler needs to process your variables file before the bootstrap one.

Here is how the file order works in my case:

@import "variables";
@import '../bootstrap/assets/stylesheets/bootstrap';

Try to change the order and recheck it.