Bower install | error can't find file

Hello,

I installed Font awesome (bower install --save fontawesome).
The fonts load so it works, but the error-console keeps giving errors:

GET http://localhost:3000/www.worlddrybag.com/wp-content/themes/nicer-pix/dist/fonts/fontawesome-webfont.ttf?v=4.7.0 404 (Not Found)

I cannot figure out why it’s doing this.

Please search before posting. Issues like this have been covered before: Proper way to include font-awesome

Hello Leader,

Well I did read before posting, and perhaps this is out of my league. But hey, if I don’t try…

First I followed te Theme Development with gulp and bower video. If I take exactly the same steps, the first difference is the way font-awesome is put in bower.json.

The video: “fontawesome”: "~4.3.0”
Mine: "font-awesome": "fontawesome#^4.7.0"

Apart from the version I don’t understand why I get ‘#^’ instead of ~

Anyway, mij bower.json in de template root folder looks like this (completely different than in video):

{
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <ben@benword.com>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "bootstrap": "git://github.com/twbs/bootstrap.git#v4.0.0-alpha.4",
    "fancyBox": "^2.1.5",
    "wow": "wowjs#^1.1.2",
    "font-awesome": "fontawesome#^4.7.0"
  }
}

And in the bower_components -> font-awesome folder, the bower.json looks like this:

{
  "name": "font-awesome",
  "description": "Font Awesome",
  "keywords": [],
  "homepage": "http://fontawesome.io",
  "dependencies": {},
  "devDependencies": {},
  "license": ["OFL-1.1", "MIT", "CC-BY-3.0"],
  "main": [
    "less/font-awesome.less",
    "scss/font-awesome.scss"
  ],
  "ignore": [
    "*/.*",
    "*.json",
    "src",
    "*.yml",
    "Gemfile",
    "Gemfile.lock",
    "*.md"
  ]
}

I’m confused and hope you can tell me where and how to put the override.

Thank you very much.

The bower.json in your theme root is what gulp uses to compile the assets from frontend libraries that you add to your project. Most frontend libraries you add will also have their own bower.json files which tell gulp which files to use via the main array. Unfortunately FontAwesome’s main array is most likely not what you want. You will either want to use the LESS or SCSS file, but not both. You’ll also want gulp to flatten your fonts into one directory, so you need to pull those in too.

Therefore you need two overrides: (1) select either LESS or SCSS (whichever you’re using for the other frontend assets in your project—this is SCSS by default in Sage); and (2) pull in fonts. You need to override this in your project so you place the overrides in the bower.json in your theme root.

You can see a good example of bower.json override syntax here and either searching or clicking on the link I posted would’ve turned up this thread and post which tell you exactly how your override should look for this specific library.