Fontawesome fonts fail after assets:install and assetic:dump

Question

I\'m trying to setting up a site I\'m working on at shared hosting and all works fine but FontAwesome icons since Symfony does not find them where they should be. I follow t

Answer 1

Actually, this is quite logical, in dev environment, it works because assetic creates as many file there is resources.

But when you're in production mode, each assetic block compiles all your resources in one single file by concatenating all your resource files.

The problem is that in css, an @import must be in the top of the file... and here, in prod, your font-awesome import is inside a file and is not read by your browser.

To fix your problem, you could do this :

Import first the stylesheet using @import :

{% stylesheets filter='css_url_rewrite'
    'bundles/template/components/font-awesome/css/font-awesome.min.css'
%}

{% endstylesheets %}

Then, import the rest

{% stylesheets
    'bundles/template/components/bootstrap/dist/css/bootstrap.min.css'
    'bundles/template/components/bootstrap/dist/css/bootstrap-theme.min.css'
    'bundles/template/components/select2/select2.css'
    'bundles/template/css/select2-bootstrap.css'
    'bundles/template/components/bootstrapvalidator/dist/css/bootstrapValidator.min.css'
    'bundles/template/components/bootstrap-datepicker/css/datepicker.css'
    'bundles/template/components/bootstrap-datepicker/css/datepicker3.css'
    'bundles/template/css/tanane.css'
   filter='css_url_rewrite'
%}

{% endstylesheets %}