Ionicons not showing after npm installation

laravel laravel-5.4 laravel-mix ionicons
Alex picture Alex · May 21, 2017 · Viewed 10k times · Source

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

Answer

Alex picture Alex · May 21, 2017

It turns out that I was using the docs for the wrong version of ionicons:

If you install ionicons with NPM as I did, you'll get the latest version; if you clone them from their github repository, you'll get v2.0.0. It turns out that in v3.0.0, many icon classes were removed/changed, hence I couldn't see <i class="icon ion-home"></i>, what a waste of time!

Related questions

How can I change the public path to something containing an underscore in Laravel Mix?

In Laravel 5.4 Mix was introduced to compile assets and maintain the asset pipeline. Mix defaults to your public directory being named public. In many cases, including mine, my public directory is called something else. In my case, it's public_html. …

Read More
PHP7 : install ext-dom issue

I'm running laravel 5.4 on Ubuntu 16.04 server with PHP7. trying to install cviebrock/eloquent-sluggable package throw some error: pish@let:/home/sherk/ftp/www$ sudo composer require cviebrock/eloquent-sluggable Do not run Composer as root/super user! See https://getcomposer.org/…

Read More
Laravel 5.4 create model, controller and migration in single artisan command

I can create a model and resource controller (binded to model) with the following command php artisan make:controller TodoController --resource --model=Todo I want to also create a migration with the above command, is it possible?

Read More