Roots Discourse

Vendor folder not being created when using font-awesome (broken)

sage9

#1

Hello,

My icons from font awesome are not working.

I noticed a vendor folder is not getting created when I do a build. I have installed font-awesome and referenced it in main.css as so:

@import "~font-awesome/scss/font-awesome";

in my webpack config:

{
    test: /\.(ttf|otf|eot|woff2?|png|jpe?g|gif|svg|ico)$/,
    include: /node_modules/,
    loader: 'url',
    options: {
      limit: 4096,
      outputPath: 'vendor/',
      name: `${config.cacheBusting}.[ext]`,
    },
  },

and in my package.json

"dependencies": {
"font-awesome": "^4.7.0",
"foundation-sites": "^6.5.0-rc.2",
"gsap": "^2.0.2",
"jquery": "^3.3.1",
"popper.js": "^1.14.3",
"underscore": "^1.9.1",
"underscore-template-loader": "^1.0.0"

}

so the font awesom epath ultimately ends up in node moduels rather than the public path

    @font-face {
  font-family: 'FontAwesome';
  src: url("./../../../node_modules/font-awesome/fonts/fontawesome-webfont.eot");
  src: url("./../../../node_modules/font-awesome/fonts/fontawesome-webfont.eot") format("embedded-opentype"), url("./../../../node_modules/font-awesome/fonts/fontawesome-webfont.woff2") format("woff2"), url("./../../../node_modules/font-awesome/fonts/fontawesome-webfont.woff") format("woff"), url("./../../../node_modules/font-awesome/fonts/fontawesome-webfont.ttf") format("truetype"), url("./../../../node_modules/font-awesome/fonts/fontawesome-webfont.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

What could i be missing?


#2

There’s a guide on how to use Font Awesome with Sage 9: