0

I have a project that implements MEAN stack. What i'm trying to do is integrate font-awesome with my project. I tried all the things on the internet but non of them work. fa class only displays a blank square not the icon. With using angular-cli i can display the icon with no problem. But with this project flow i could'nt. On the browser console i get the following warnings, maybe its about it.

The problem is similar with the possible duplicate. But it's not containing the solution for my problem.

Failed to decode downloaded font: http://localhost:3000/fontawesome-webfont.woff2
vehicle:1 OTS parsing error: invalid version tag
vehicle:1 Failed to decode downloaded font: http://localhost:3000/fontawesome-webfont.woff
vehicle:1 OTS parsing error: invalid version tag
vehicle:1 Failed to decode downloaded font: http://localhost:3000/fontawesome-webfont.ttf
vehicle:1 OTS parsing error: invalid version tag

my webpack.config.js

module.exports = {
    entry: {
        app: "./client/main.ts",
        vendorStyles: "./client/vendor.styles.js",
        vendorScripts: "./client/vendor.scripts.js"
    },
    output: {
        path: path.join(__dirname, "/public/dist"),
        filename: "[name].js"
    },
    module: {
        "rules": [
            {
                test: /\.html$/,
                use: [{ loader: 'html-loader' }]
            },
            {
                test: /.*client\\app.*\.css$/,
                use: [{ loader: 'raw-loader' }]
            },
            {
                test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        publicPath: '',

                    }
                }]
            },
            // {
            //     test: /\.css$/,
            //     use: [{ loader: 'raw-loader' }]
            // },
            {
                test: [/.*node_modules.*\.css$/, /.*client\\styles.*\.css$/],
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.ts$/, use: [
                    { 'loader': 'angular2-template-loader' },
                    { 'loader': 'ts-loader' }
                ]
            }
        ]
    },
    devtool: "sourcemap",
    resolve: {
        extensions: [".js", ".ts"]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            Popper: ['popper.js', 'default'],
            moment: 'moment'
        })
    ],
    watch: true
}

vendor.styles.js

import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.css';

index.html

<!DOCTYPE html>
<html>

<head>
    <base href="/">

</head>

<body>
    <app-root>Loading...</app-root>

    <script src="/dist/vendorStyles.js"></script>
    <script src="/dist/vendorScripts.js"></script>
    <script src="/dist/app.js"></script>
</body>

</html>
aliemre
  • 109
  • 3
  • 12
  • Possible duplicate of [Failed to decode downloaded font, OTS parsing error: invalid version tag + rails 4](https://stackoverflow.com/questions/34288778/failed-to-decode-downloaded-font-ots-parsing-error-invalid-version-tag-rails) – masterfloda Feb 26 '18 at 22:11

1 Answers1

0

It was causing of publicPath on the webpack file. Changing loader options to this solved the problem.

options: {
  name: '[name].[ext]',
  outputPath: '/fonts',
  publicPath: '/dist/fonts',

}
aliemre
  • 109
  • 3
  • 12