Twitter Bootstrap glyphicons font's not found when using assetic in prod on Symfony2

Question

I've read a lot of posts about this but couldn't get this to work for my project.

So basiclly I have a Symfony2 project which includes twitter bootstrap (v3). Every thing works fine in dev mode but when I try it in prod mode i got errors saying that the twitter bootstrap fonts couldn't be found:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/Symfony/css/fonts/glyphicons-halflings-regular.woff   
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/Symfony/css/fonts/glyphicons-halflings-regular.ttf  
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/Symfony/css/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular

Which is normal cause I dont have a css/ folder in Symfony/

Here is how the project is structured:

app/
src/
vendor/
web/
   css/
      compiled/
   fonts/
   js/

twig file:

{% block stylesheets %}
    {% stylesheets output="css/compiled/main.css" filter='cssrewrite'
        'css/bootstrap.min.css'
        'css/general.css'
        'css/navigation.css'
    %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

I used:

php app/console assetic:dump --env=prod

I've checked in the bootstrap.min.css (in web/css/compiled) files (prod and dev) and they both have the same path for the fonts. Something like (../../../fonts/fontName.ext).

If we look at the path it shouldn't work neither in dev nor in prod mode as the path puts the fonts/ file outside the web directory. Yet, it works in dev mode.

Any idea on how to resolve this ?

I would be greatful.

Answer 1

If you use the "cssrewrite" filter, it rewrites the path to the font-files (to their original source) as Maxoo already said.

You can add the assetic path for the font-files in the following way (so they are copied to the css/fonts/ folder and the css-files will find them by using the orginal ../fonts/ path)

I've used the following solution:

config.yml:

assetic:
    debug:          %kernel.debug%
    use_controller: false
    assets:
        bootstrap_fonts_woff:
            inputs:
                - 'original/path/to/bootstrap/fonts/glyphicons-halflings-regular.woff'
            output: fonts/glyphicons-halflings-regular.woff
        bootstrap_fonts_ttf:            
            inputs:
                - 'original/path/to/bootstrap/fonts/glyphicons-halflings-regular.ttf'
            output: fonts/glyphicons-halflings-regular.ttf
        bootstrap_fonts_svg:
            inputs:
                - 'original/path/to/bootstrap/fonts/glyphicons-halflings-regular.svg'
            output: fonts/glyphicons-halflings-regular.svg
        bootstrap_fonts_eot:
            inputs:
                - 'original/path/to/bootstrap/fonts/glyphicons-halflings-regular.eot'
            output: fonts/glyphicons-halflings-regular.eot

Then call

php app/console assetic:dump --env=prod

which should export the files to the fonts-directory inside your web-folder.

Hope this helps!