I am trying to load FontAwesome using SASS by @importing it using this line:
@import "../node_modules/font-awesome/scss/font-awesome";
and keep getting these errors in the console and not getting the FA icons to load:
olympos.min.js?ver=1.0:1 GET http://test.dev/wp-content/themes/fonts/fontawesome-webfont.woff2?v=4.7.0 net::ERR_ABORTED (anonymous) @ olympos.min.js?ver=1.0:1 (anonymous) @ olympos.min.js?ver=1.0:1 (anonymous) @ olympos.min.js?ver=1.0:1
(index):1 GET http://test.dev/wp-content/themes/fonts/fontawesome-webfont.woff?v=4.7.0 net::ERR_ABORTED
(index):1 GET http://test.dev/wp-content/themes/fonts/fontawesome-webfont.ttf?v=4.7.0 net::ERR_ABORTED
I have tried following the original documentation on FontAwesomes website and results were similar - I have changed the file
node_modules/font-awesome/scss/_variables.scssvariable:$fa-font-path: "../fonts" !default;but noticed that it is pointing to the correct /fonts folder including the fonts.Tried loading it from my
gulpfile.jsby addingfont-awesome.scssto my sass task and not from within my projects scss_fonts.scssfile.
this is my current local _fonts.scss file after a few variations:
@import "../node_modules/font-awesome/scss/font-awesome";
$fa-font-path: "../node_modules/font-awesome/fonts" !default;
@import "../node_modules/font-awesome/scss/font-awesome.scss";
@font-face {
font-family: 'FontAwesome';
src: url('../node_modules/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../node_modules/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype');
src: url('../node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2');
src: url('../node_modules/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff');
src: url('../node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype');
src: url('../node_modules/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
After reviewing this post How do I load font-awesome using SCSS (SASS) in Webpack using relative paths?
I get no proper result.
I came accross this post: "NetworkError: 404 Not Found fontawesome-webfont.woff?v=4.0.3
... mentioning it might be an Apache2 server fix (which I'm not quite sure where to add the code part... to my etc/apache2/sites-available/test.conf?)
I haven't tested this option yet, but the thing is - if this works locally on my localhost, this might be a problem to apply this change to my clients page (the production website is hosted on a server where I cant change anything in the apache configurations - due to a bad hosting company service).
Is there an other solution for this? Maybe adding this code part (or any other) to the .htaccess file?
What are the possible solutions for this case?
Using Ubuntu 16.04 - gulp - SASS - NPM
Feel free to request any more information that might help you help my and i will update my post
