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 this steps to move the site to production shared hosting:

• Publish assets as hard copy since SH doesn't allow symlink so I run this command assets:install
• Publish assets handled by Assetic by running this commands: assetic:dump (dev) and assetic:dump --env=prod (prod)

But it's not working since I'm getting this errors at Firebug all the time:

"NetworkError: 404 Not Found - http://tanane.com/bundles/backend/img/mybg.png"
"NetworkError: 404 Not Found - http://tanane.com/bundles/backend/fonts/fontawesome-webfont.woff?v=4.1.0"
"NetworkError: 404 Not Found - http://tanane.com/bundles/backend/fonts/fontawesome-webfont.ttf?v=4.1.0"

At localhost, following the same steps things works fine so I don't know if is a permission problem or another problem.

This is how I define the assets at base.html.twig:

  {% block stylesheets %}
      {% stylesheets
              'bundles/template/css/bootstrap.min.css'
              'bundles/template/css/bootstrap-theme.min.css'
              'bundles/template/css/font-awesome.min.css'
              'bundles/template/css/select2.css'
              'bundles/template/css/select2-bootstrap.css'
              'bundles/template/css/bootstrapValidator.min.css'
              'bundles/template/css/datepicker.css'
              'bundles/template/css/datepicker3.css'
              'bundles/template/css/tanane.css'
         filter='cssrewrite'
      %}
      <link rel="stylesheet" href="{{ asset_url }}" />
     {% endstylesheets %}
  {% endblock %}

I did a research and found a lot of topics around this problem as for example this one also I found this interesting one but have my doubts around the second one.

Can any give me a help on this? I'm stucked

Installed SpBowerBundle + FkrCssURLRewriteBundle

I have installed and configured both bundles but even after that I'm still having problems with images in this case, just in Select2 library.

This is the bower.json file content:

{
    "name": "TemplateBundle",
    "dependencies": {
        "bootstrap": "latest",
        "bootstrap-datepicker": "latest",
        "bootstrap-growl": "latest",
        "bootstrapvalidator": "latest",
        "jquery": "1.11.*",
        "jquery-migrate": "latest",
        "pwstrength-bootstrap": "latest",
        "select2": "latest",
        "font-awesome": "latest"
    }
}

And this are the lines I've added to /app/config/config.yml

#FkrCssURLRewriteBundle 
fkr_css_url_rewrite:
    rewrite_only_if_file_exists: true
    clear_urls: true

# SpBowerBundle
sp_bower:
    install_on_warmup: true
    allow_root: true
    assetic:
        enabled: true
        nest_dependencies: false
        filters:
            packages:
                bootstrap:
                    css:
                        - css_url_rewrite
                font_awesome:
                    css:
                        - css_url_rewrite
    bundles:
        TemplateBundle: ~

This is the error I'm getting now:

"NetworkError: 404 Not Found - http://tanane.dev/select2.png"
"NetworkError: 404 Not Found - http://tanane.dev/select2-spinner.gif"

Why?

Disabled Assetic in SpBowerBundle

I've disabled assetic in SpBowerBundle at /app/config/config.yml:

# SpBowerBundle
sp_bower:
    install_on_warmup: true
    allow_root: true
    bundles:
        TemplateBundle: ~

Since I'm using assetic and also SpBowerBundle to handle libraries dependencies then I rewrite the CSS/JS blocks at base.html.twig as follow:

{% stylesheets
    'bundles/template/components/bootstrap/dist/css/bootstrap.min.css'
    'bundles/template/components/bootstrap/dist/css/bootstrap-theme.min.css'
    'bundles/template/components/font-awesome/css/font-awesome.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 %}

Then I clear the cache and run the commands assets:install --symlink, assetic:dump and assetic:dump --env=prod and still not seeing images and also FontAwesome fonts:

Failed to load resource: the server responded with a status of 404 (Not Found) http://tanane.dev/app_dev.php/css/select2.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://tanane.dev/app_dev.php/css/select2-spinner.gif
Failed to load resource: the server responded with a status of 404 (Not Found) http://tanane.dev/app_dev.php/css/select2.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://tanane.dev/app_dev.php/fonts/fontawesome-webfont.woff?v=4.2.0
Failed to load resource: the server responded with a status of 404 (Not Found) http://tanane.dev/app_dev.php/fonts/fontawesome-webfont.ttf?v=4.2.0
Failed to load resource: the server responded with a status of 404 (Not Found) http://tanane.dev/app_dev.php/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular

I miss something else? What else I can do it in order to fix this annoying issue?

Fixing the disable way

I fixed some mistakes I made in SpBowerBundle configuration and now I have this:

sp_bower:
    install_on_warmup: true
    allow_root: true
    assetic:
        enabled: false
        nest_dependencies: false
    bundles:
        TemplateBundle: ~

But images, managed by SpBowerBundle still not showing, see the attached image:

I have assetic enabled in my config.yml:

assetic:
    debug:          "%kernel.debug%"
    use_controller: false
    bundles:
      - FrontendBundle
      - BackendBundle
      - ProductBundle
      - CommonBundle
      - UserBundle
      - TemplateBundle

Should I disable it and remove all those bundles from there?

Another test

Following @lenybenard suggestions I did this:

    {% block stylesheets %}
        {% stylesheets filter='css_url_rewrite'
            'bundles/template/components/font-awesome/css/font-awesome.min.css'
            'bundles/template/components/bootstrap/dist/css/bootstrap.min.css'
            'bundles/template/components/bootstrap/dist/css/bootstrap-theme.min.css'
           filter='cssrewrite'
        %}
        <link rel="stylesheet" href="{{ asset_url }}" />
        {% endstylesheets %}

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

Repeat the same process once again:

• Clear cache cache:clear & cache:warmup and also rm -rf /var/cache & rm -rf /var/logs just in case
• From Symofony2 shell: assets:install --symlink & assetic:dump & assetic:dump --env=prod

Result: in DEV all is fine, in PROD all is wrong

Answer 1

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 2

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 3

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 %}

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

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.