Fontawesome does not load correctly loads square

Question

Fontawesome does not load correctly loads square

Navigation

#1 by (0 votes)

0

Once you have made the settings and install the font-awesome with the Bower and call it via my Sass file plugin.sass The same is not working appear only a few squares.

_variables.scss

install the sourceawesome-sass , but the problem persisted.

Import plugin.sass settings:

@import molecules/_mixins
@import ../bower_components/fontawesome/web-fonts-with-css/scss/fontawesome
// @import ../bower_components/fontawesome-sass/fontawesome
// @import ../bower_components/fontawesome/web-fonts-with-css/scss/fa-solid
// @import ../bower_components/fontawesome/web-fonts-with-css/scss/fa-regular
// @import ../bower_components/fontawesome/web-fonts-with-css/scss/fa-brands
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300)

The _variable.scss file looks like this:

$fa-font-path:"../webfonts  "!default;

insert the code here

Now like this:

$fa-font-path:                "./bower_components/fontawesome/web-fonts-with-css/webfonts" !default;

I have now uninstalled fontawesome-sass the code looks like this:

@import molecules/mixins
@import ../bower_components/bootstrap-sass/assets/stylesheets/bootstrap
@import ../bower_components/fontawesome/web-fonts-with-css/scss/fontawesome
// @import ../bower_components/fontawesome/web-fonts-with-css/scss/fa-solid
// @import ../bower_components/fontawesome/web-fonts-with-css/scss/fa-regular
// @import ../bower_components/fontawesome/web-fonts-with-css/scss/fa-brands
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300)

Note: with the commented lines no error appears, but the icons do not appear either. When removing the comments the browser presents several errors to be more accurate nine

@import molecules/mixins
@import ../bower_components/bootstrap-sass/assets/stylesheets/bootstrap
@import ../bower_components/fontawesome/web-fonts-with-css/scss/fontawesome
@import ../bower_components/fontawesome/web-fonts-with-css/scss/fa-solid
@import ../bower_components/fontawesome/web-fonts-with-css/scss/fa-regular
@import ../bower_components/fontawesome/web-fonts-with-css/scss/fa-brands
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300)

follows the bug report in the Google Chrome console:

Failed to load resource: net::ERR_FILE_NOT_FOUND    fa-brands-400.woff2
Failed to load resource: net::ERR_FILE_NOT_FOUND    fa-regular-400.woff2 
Failed to load resource: net::ERR_FILE_NOT_FOUND    fa-solid-900.woff 
Failed to load resource: net::ERR_FILE_NOT_FOUND    fa-brands-400.woff 
Failed to load resource: net::ERR_FILE_NOT_FOUND    fa-regular-400.woff 
Failed to load resource: net::ERR_FILE_NOT_FOUND    fa-solid-900.ttf 
Failed to load resource: net::ERR_FILE_NOT_FOUND    fa-brands-400.ttf 
Failed to load resource: net::ERR_FILE_NOT_FOUND    fa-regular-400.ttf

Directory structure where my fonts are

html5 sass bower gulp font-awesome

asked by anonymous 13.04.2018 / 02:27

1 answer

Help with strings read from C file Warning: mysqli_fetch_assoc () expects parameter 1 to be mysqli_result, boolean given in [duplicate]

score 0 · Accepted Answer

I was able to solve the problem by correctly changing the $ fa-font-path earlier like this:

$fa-font-path:                "./bower_components/fontawesome/web-fonts-with-css/webfonts" !default;

Now like this:

$fa-font-path:                "../bower_components/fontawesome/web-fonts-with-css/webfonts" !default;

And as for the other imports really they are needed and I understood why, because in the font-awesome version 5 for some reason the names of the icons have changed and they are being referenced in fa-solid, fa-brands and fa- and if these imports are not made they will not be called on the page correctly so I kept it this way:

@import molecules/mixins
@import ../bower_components/bootstrap-sass/assets/stylesheets/bootstrap
@import ../bower_components/fontawesome/web-fonts-with-css/scss/fontawesome
@import ../bower_components/fontawesome/web-fonts-with-css/scss/fa-solid
@import ../bower_components/fontawesome/web-fonts-with-css/scss/fa-regular
@import ../bower_components/fontawesome/web-fonts-with-css/scss/fa-brands
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300)

And now the icons appear without any type of error in the console.