keevitaja's avatar

How to bundle Font Awesome with Elixir and Webpack

Hello!

Is it possible to bundle Font Awesome, and other dependencies, into the main.js file?

If yes, then how?

0 likes
6 replies
ejdelmonico's avatar

Yes and no. Yes for everything except the actual fonts or svgs. I just use the copy command to send them to the public directory. The other files, just do as you would with similar files. Font-awesome comes with SCSS or LESS files. Just import the needed files. There is no JS necessary for font-awesome.

ejdelmonico's avatar

No, just css and the icon-fonts. Just put them in your package.json and import from node_modules. The, run a copy method to copy to your public directory. I copy mine to public/build/fonts

Roni's avatar

@keevitaja, Do you want a full gulp file here? Here is the line from mine that moves it from my node modules


//I move it into my project to be merged with my domain css

//you can skip this step and move it to it's final destination
mix.copy('./node_modules/font-awesome/css/font-awesome.css', 'resources/assets/libs/font-awesome/css');  

// or mix it with your other goodies
mix.styles([
        "libs/bootstrap4/css/bootstrap.css",
        "libs/font-awesome/css/font-awesome.css",
        "css/domain.css"
    ],
    'public/css/app.css',
    'resources/assets');

// dont forget your font files too

mix.copy('./node_modules/font-awesome/fonts', 'public/fonts');

ejdelmonico's avatar

You need to copy the fonts to public/fonts. Otherwise, you will need to change the base path in font-awesome to point to wherever you store the fonts. So, basically if using versioning...public/build/fonts. if not public/fonts

You do not need to copy the fonts to resources, just directly to public directory.

Please or to participate in this conversation.