Cant load ionicons's fonts

Question

My folder structure:

/dist
    index.html
    /css
        app.css
    /js
        app.js  
    /fonts
        /vendor
            /ionicons
                /dist
                    ionicons.eot
                    ionicons.svg
                    ionicons.ttf
                    ionicons.woff
                    ionicons.woff2
    /node_modules..             
    /src
        /assets
                /js
                    app.js
                /sass
                    app.scss

Webpack:

let mix = require('laravel-mix');
mix.setPublicPath('dist');

mix.js('src/assets/js/app.js', 'dist/js')
   .sass('src/assets/sass/app.scss', 'dist/css');

app.scss:

// Bootstrap
@import '~bootstrap/scss/bootstrap';

//ionicons
$ionicons-font-path: "~ionicons/dist/fonts";
@import '~ionicons/dist/scss/ionicons';

Now, I have an HTML file inside dist folder "index.html"

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>example</title>
    <link rel="stylesheet" href="./css/app.css">
</head>

<body>
 <div id="example">
     Hello!
    <i class="icon ion-md-heart text-white"></i>
 </div>
    <script src="./js/app.js"></script>
</body>

</html>

when I open it using chrome: file:///D:/Projects/exampleproject/dist/index.html

The page does loads bootstrap 4 , and ionicons's only css without the fonts! It shows me this:

ionicons.woff2:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
ionicons.woff:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
ionicons.ttf:1 Failed to load resource: net::ERR_FILE_NOT_FOUND

You can't simply run the .html file in your browser, you need a server to serve those assets. — PlayMa256, May 20 '18 at 14:54

score 0 · Accepted Answer · answered May 21 '18 at 01:36

The problem is the reference to the font files. The related files called in a css (like @import, background-image, and other kind of file references such as source for web fonts) are relative to the folder from where the css file is loaded.

So in your case, in order for the font files to be loaded properly, they will need to be referenced relative to /dist/css so you should change the source path for your fonts files to ../fonts/vendor/ionicons/dist/:

$ionicons-font-path: '../fonts/vendor/ionicons/dist/fonts";
@import '~ionicons/dist/scss/ionicons';

Or if you run your project in a web server, you could simply reference the files from your document root. In that case you could use /fonts/vendor/ionicons/dist/.

Cant load ionicons's fonts

1 Answers1