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