CODEWITHSUNDEEP
cssfontswebpack
Litvinenko Evgeny
Litvinenko Evgeny

Reputation: 95

font awesome not working webpack

i am try to add font-awesome icons to my site

here is my webpack config: 

module.exports = {
  watch: true,
  context: __dirname + '/src',
  entry: './entry.js',
  devTool: "source-map",
  output: {
    path: __dirname + "/dist",
    publicPath: '/dist/',
    contentBase: __dirname + '/dist/',
    filename: '[name].js'
  },
  module: {
    loaders: [

      {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      },
      {test: /\.(otf|gif|png|jpg|JPG)$/, loader: "url-loader"},
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/font-woff"
      }, {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/font-woff"
      }, {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/octet-stream"
      }, {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file"
      }, {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=image/svg+xml"
      }
    ]
  }
};

in dev-server it works great, but when i try to open dist/index.html, it cant find fonts. I am include it like this:

@import "~font-awesome/css/font-awesome.min.css";

here is repo

I think, mistake somewhere in my webpack.config file. But another fonts works as needed.

Upvotes: 3

Views: 3982

Answers (1)

Bob Sponge
Bob Sponge

Reputation: 4738

In order you setted publicPath as absolute path, all static resourses was requested from http://litvinenkoevgeny.github.io/dist/ while actual path, where font related files are available from web is http://litvinenkoevgeny.github.io/elegant/dist/.

So, you just need to change publicPath to relative: ./dist/.

Upvotes: 1

Related Questions