Sunday, May 21, 2017

Ionicons not showing after npm installation

I installed ionicons using npm install --save ionicons so that my package.json updated to:

"dependencies": {
    "ionicons": "^3.0.0"
}

Next, I added the following in my /resources/assets/sass/app.scss:

// Ionicons
@import "node_modules/ionicons/dist/scss/ionicons";

After successfully running npm run dev, I ended up with

/public
    /css
        app.css
    /fonts
        /vendor
            /ionicons
                /dist
                    ionicons.eot
                    ionicons.svg
                    ionicons.ttf
                    ionicons.woff
                    ionicons.woff2

With no errors in the browser console, not a single ionicon (e.g. <i class="icon ion-home"></i>) is showing. I inspected public/css/app.css, and found that it references ionic fonts like so: /fonts/vendor/ionicons/dist/ionicons, which seems to comply with the folder structure above.

I tried adjusting @import, changing url(...) refrences in app.css, moving fonts directory - no luck. Lastly, I tried to reference ionicons through a CDN, and it worked like charm.

What am I doing wrong here? Thanks



via Alex

Advertisement