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

问题

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.

回答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!

回答2:

You don't have to search them under Symfony/ path, infact Symfony2 webfolder is web/ so url is "relative" to web/ folder.

BTW, you have to use the following command

php app/console assets:install

If you like to have symlinks you could also add --symlink parameter to your command

So what's the difference between assets:install and assetics:dump ?

assets:install will symlink or copy the desired resources to "public web folder"

assetic:dump will only combine all js into one

回答3:

Proper Solution:

Install Nodejs, setup symfony2 config file, it will compile cssrewrite filter of your choice into CSS automatically. This will resolve these errors.
my config.yml and config_dev.yml looks like this just an assetic section - Be very careful with the path syntax or else you will get this error "An error occurred while running: ... Error: Cannot find module 'less'" Any many people ran into these 3 errors messages google this string to find out "An error occurred while running: Error: Cannot find module 'less'"

assetic:

debug: '%kernel.debug%'
use_controller:
       enabled: '%kernel.debug%'
       profiler: true
filters:
    cssrewrite: ~
    ###is for linux path i am on windows for dev and linux for prod
    less:
        ###node: /usr/bin/nodejs
        ###node_paths: [/usr/lib/nodejs]
        node: "C:\\Program Files (x86)\\nodejs\\node.exe"
        node_paths: ["C:\\Users\\John\\AppData\\Roaming\\npm\\node_modules"]
        apply_to: "\.less$"

do not forget installing "npm install -g less"
In my specific case: when doing "php app/console assetic:dump" I get this same error. This is because my Windows dev web server is setup like this: the web root is "C:\xampp\htdocs\" and the project is like this "C:\xampp\htdocs\phantom\" and the assetic:dump puts glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.woff, and glyphicons-halflings-regular.woff2 in "C:\xampp\htdocs\phantom\web\fonts" HOWEVER, when page is loaded it looks in "http://localhost/" as you can see this is the issue with my development setup. So i copy folder fonts "C:\xampp\htdocs\phantom\web\fonts" to web root "C:\xampp\htdocs\" That solves the problem.
This will not happen in production environment where your server web root is "C:\xampp\htdocs\phantom\web\". I tested on a production server without need to manually copy the fonts folder to webroot.
In addition, when running the same command in your project directory "php app/console assetic:dump" you will get error like "FileError: '../bootstrap/less/bootstrap.less' wasn't found. Tried - ../bootstrap/less/bootstrap.less,C:\xampp\htdocs\phantom\vendor\mopa\bootstrap-bundle\Mopa\Bundle\BootstrapBundle\Resources\public\bootstrap" By the same token bootstrap was installed by "php app/console assets:install" in "C:\xampp\htdocs\phantom\web\bootstrap" which is not correct webroot directory so again to resolve this same temporary issue in development i will just copy directory "C:\xampp\htdocs\phantom\web\bootstrap" to "C:\xampp\htdocs\bootstrap" that solves problem. Run your command again it will compile to css nicely and cleanly.

回答4:

May be you should try to keep the Bootstrap folder structure unchanged (downloading it with bower for example). By the way the cssrewrite filter will parse your css files to reflect the location of the fonts.

来源：https://stackoverflow.com/questions/25864784/twitter-bootstrap-glyphicons-fonts-not-found-when-using-assetic-in-prod-on-symf

标签

php

twitter-bootstrap

symfony

assetic