1

My goal is to use the Bootstrap Glyphicons font in my Symfony (2.8) web application. I am using assetic but it is there that I have my problem. I added bootstrap in my composer.json file ("twitter/bootstrap": "3.3."). After running composer install, I checked the path in the original bootstrap.css file (vendor folder) and the url to the fonts look as follows (which is okay of course, as the fonts can be found there): "src: url('../fonts/glyphicons-halflings-regular.eot');".

However, when checking the result in the web/css folder after running assetic:dump, I see that the path is wrongly changed to "src: url('../../fonts/glyphicons-halflings-regular.eot');" (notice the "../" that was added)

The assetic part in my config.yml file looks like as follows:

assetic:
debug:          "%kernel.debug%"
use_controller: false
bundles:        [ 'AppBundle' ]
filters:
    cssrewrite: ~
assets:
    bootstrap_js_and_jquery:
        inputs:
            - '%kernel.root_dir%/../vendor/components/jquery/jquery.js'
            - '%kernel.root_dir%/../vendor/twbs/bootstrap/dist/js/bootstrap.js'
    bootstrap_css:
        inputs:
            - '%kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/bootstrap.css'
    bootstrap_glyphicons_ttf:
        inputs:
            - '%kernel.root_dir%/../vendor/twbs/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf'
        output: "fonts/glyphicons-halflings-regular.ttf"
    bootstrap_glyphicons_eot:
        inputs:
            - '%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.eot'
        output: "fonts/glyphicons-halflings-regular.eot"
    bootstrap_glyphicons_svg:
        inputs:
            - '%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.svg'
        output: "fonts/glyphicons-halflings-regular.svg"
    bootstrap_glyphicons_woff:
        inputs:
            - '%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.woff'
        output: "fonts/glyphicons-halflings-regular.woff"
    bootstrap_glyphicons_woff2:
        inputs:
            - '%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.woff2'
        output: "fonts/glyphicons-halflings-regular.woff2"

The result of this is that the css files can be found in 'web/css' and the fonts in 'web/fonts' (so all of that looks fine).

In my twig template I applied the cssrewrite rule:

{% stylesheets '@bootstrap_css' filter='cssrewrite'%}
        <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

Can anyone explain me why the path in the css file is rewritten by adding "../" in front of the path, which makes that the fonts cannot be found (404)? Did anyone managed to get this working in a similar set-up?

Thanks in advance.

Improve this question
5
  • Notice that turning off the "cssrewrite" filter does fix my issue... But why is this? Why does assetic:dump adds "../" in front of the path when using "cssrewrite" as filter in this particular scenario? Commented May 27, 2016 at 18:14
  • Because that's the purpose of the filter. See symfony.com/doc/current/cookbook/assetic/… Commented May 31, 2016 at 12:39
  • @glerendegui "This parses your CSS files and corrects the paths internally to reflect the new location." About that "new location": the bootstrap css file can be found in web/css while the bootstrap fonts can be found in web/fonts. So the "new location" does not require that "../" is added to the path of the fonts in the bootstrap css file. I thought that assetic was "clever" enough to know that it should not rewrite the path in this particular case, but apparently this is not the case. So I do not longer apply the cssrewrite filter in this particular case. Commented May 31, 2016 at 17:02
  • cssrewrite filter process one asset at the time. As you say, it's not clever enough to analyze the output of those font rules while it's processing @bootstrap_css. cssrewrite seems to be design for only bundle assets. I suggest to take a look at this solution stackoverflow.com/questions/25640993/… After create the links with post-install-cmd everything looks easier Commented Jun 1, 2016 at 2:20
  • @glerendegui Thanks. Indeed, that solution could also suit me (in the mean time I continued by skipping that 'cssrewrite' filter for bootstrap). Commented Jun 2, 2016 at 14:12
Related questions
9
Bootstrap - about fonts files (.eot .svg .ttf .woff and .woff2) roles and usages
0
Having some problems with glyphicons from bootstrap 3.3.5 in Firefox
18
BootStrap : Uncaught TypeError: $(...).datetimepicker is not a function
Load 6 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.