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

I had a similar problem while trying to use fonts with an Ez Publish setup. The fonts were correctly located in the web/font/ directory and the .less was correctly compiled to point to that directory. Yet, I was getting 404 errors while trying to pull the font files.

The problem turned out to be an incorrectly configured virtual host. The config file had this line:

RewriteRule ^/(css|js)/.*\.(css|js) - [L]

Which effectively states 'serve any file from the css or js folder as long as the extension is .js or .css'. I had to modify it to

RewriteRule ^/(css|js|font)/.*\.w* - [L]

to allow for the font folder and any extension. Without this Symfony and Ez Publish were trying to route the url to a dynamic content.

Answer 2

This is the result of a rather unfortunate bug in assetic. See this github description for further details.

The solution I have settled on is to use https://github.com/fkrauthan/FkrCssURLRewriteBundle

It is the only approach of the many I have tried that works in every case.

Answer 3

i got same problem, and this is worked

i use https://github.com/fkrauthan/FkrCssURLRewriteBundle and then in #app/config/config.yml add this

font-awesome-otf:
        inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/FontAwesome.otf'
        output: 'fonts/FontAwesome.otf'
font-awesome-eot:
        inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.eot'
        output: 'fonts/fontawesome-webfont.eot'
font-awesome-svg:
        inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.svg'
        output: 'fonts/fontawesome-webfont.svg'
font-awesome-ttf:
        inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.ttf'
        output: 'fonts/fontawesome-webfont.ttf'
font-awesome-woff:
        inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.woff'
        output: 'fonts/fontawesome-webfont.woff'

I Would like thanks to : http://www.maraumax.fr

Answer 4

I've been dealing with this for a while and came up with a new solution. Improving @lenybernard's answer a little bit, here is my solution:

Since the @import is not located in the font-awesome-min.css file, it didn't work for my case. I was using a theme and found out that the style sheet related to the theme had the import annotation. Also, the theme was requiring Bootstrap to be loaded before its own CSS file, so moving the theme.css file to top of the list, or separating it as mentioned in the previous answer broke the theme completely. So, an ultimate solution for this is to find the line with the @import tag and put it in the first line of the first file in your assetic list, and remove it from the file it is referred. For example:

'bundles/foo/bootstrap.css'
'bundles/foo/custom_theme.css' <- if your @import is here
'bundles/foo/font-awesome.css'

...

'bundles/foo/bootstrap.css' <- put it here
'bundles/foo/custom_theme.css' <- and remove it from this one
'bundles/foo/font-awesome.css'

Another solution is to create a new CSS file and name it however you want, put your @import line on this file, and put this file on top of the list. For example:

'bundles/foo/font-awesome-fix.css' <- put @import here
'bundles/foo/bootstrap.css'
'bundles/foo/custom_theme.css' <- and remove it from this one
'bundles/foo/font-awesome.css'

Answer 5

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'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% 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'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}