Adding font-awesome to project with webpack

Question

I've bootstrap template and I'm trying to put this to FountainJS. I included all scss files from template and it's ok. Now i need to include eg font-awesome, so i used npm install font-awesome --save and add to index.js require('font-awesome'); but it's still not available in project

My src/index.js file:

var angular = require('angular');

var techsModule = require('./app/techs/index');
require('angular-ui-router');
var routesConfig = require('./routes');

var main = require('./app/main');
var header = require('./app/header');
var footer = require('./app/footer');

require('./index.scss');
require('font-awesome');

angular
  .module('app', [techsModule, 'ui.router'])
  .config(routesConfig)
  .component('app', main)
  .component('fountainHeader', header)
  .component('fountainFooter', footer);

Did you take a look at gist.github.com/Turbo87/e8e941e68308d3b40ef6 or github.com/gowravshekar/font-awesome-webpack ? Here's another example of getting font awesome to work with webpack mattzabriskie.com/blog/font-awesome-webpack — Nick Bartlett
– Nick Bartlett, Commented Jul 15, 2016 at 13:35

Community · Accepted Answer · 2017-05-23 12:08:09Z

1

I believe that CommonJs does not know how to load font-awesome. If you take a look at the Font Awesome package.json it does not have main property which is used to find a file to load. Instead there is a property style. If you look at the official package.json explanation you would not be able to find style property anywhere. You can find similar questions in StackOverflow about style property

I believe your best bet is to require a specific file from the node_module directory. Taking an assumption that src/ folder located in your root app folder

require('../node_modules/font-awesome/css/font-awesome.css');
// or
require('../node_modules/font-awesome/css/font-awesome.min.css');

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Jul 15, 2016 at 13:46

anvk

1,2019 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding font-awesome to project with webpack

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related