Fontawesome does not carry correctamete carries squares

Asked

Viewed 1,584 times

0

After performing the settings and installing the font-awesome with the Bower and call you through my file Sass through a name file Sass plugin. The same is not run only appear a few squares.

Before formatting the computer had managed to solve this problem by calling a few more Imports which after formatting did not work even so I have already changed my file _scss variables. but still the problem persists, I even tried to install the fonteawesome-Sass, but the problem persisted.

Settings of import plugin.Sass:

@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 archive _variable scss. was like this:

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

enter the code here

now thus: 

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

I currently uninstalled the fontawesome-Sass the code is 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)

With the commented lines no error appears, but neither do the icons. when removing comments the browser presents several errors to be more exact 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 on 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

Estrutura do diretorio onde estão minhas fonts

html5 sass gulp bower font-awesome
  • 1

    I know it may sound silly, but have you looked at whether all the . ttf files, . Woff . woff2 are in the right folder? This message says that he did not find the fonts in the folder you indicated... I think you should not separate each font in a folder. It should be all fa- inside the briefcase /scss/fontawesome and not /scss/fa-solid for example... tries to put everything in a single folder. And checks if this path Edo path is correct "$fa-font-path:" OBS: O squared pq has been loaded the default font of the browser and there is no Fawesome Unic character

  • @hugocsl In fact these other Imports were a palliative solution that had worked well in the original era without the separate source Imports, and had worked after formatting the pc neither so nor the way it should be kkk, I added at last Dit the structure from where it is installed my font-awesome

  • 1

    Have you tried using CDN just to test if the font will render on your machine?

  • @hugocsl yes with Cdn works normal qria a way to run the from Bower

  • @hugocsl notice when taking the lines of fonts apart ñ from error but ñ works

  • @hugocsl sent an e-mail to fontawesome now I’m waiting for the answer

  • @hugocsl but I thought of something and I’ll try later

  • Glad you decided, you can mark your own answer as resolved. []’s

Show 3 more comments

1 answer

0


managed to solve the problem by correctly changing the $fa-font-path previously so:

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

now thus:

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

and as for the other Imports they really are necessary and I understood why, because in the version of font-awesome 5 for some reason the name of the icons have changed and they are being referenced in fa-Solid, fa-Rands and fa-regular and if these Imports are not made they will not be called on the page correctly so kept 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 kind of error in the console.

  • If possible mark as solved.

Browser other questions tagged html5 sass gulp bower font-awesome

You are not signed in. Login or sign up in order to post.