Symfony2 and Twitter Bootstrap glyphicons

Question

I created a Bundle in order to include Twitter Bootstap into my project. I'm aware, that there existing Bundles for that but I wan't to take control of it by myself. That means I don't want to install Less compiler and stuff like that.

The .js and .css file are applied well if I include them as follows into my template:

{% block javascripts %}
{% javascripts
'@MyAssetBundle/Resources/public/js/jquery.min.js'
'@MyAssetBundle/Resources/public/js/bootstrap.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}

{% block stylesheets %}
{% stylesheets '@MyAssetBundle/Resources/public/css/*' filter='cssrewrite' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}

I only struggle with including the appropriate fonts in order to use the glyphicons Bootstrap provides.

According to the css definitions the fonts are supposed to be available at ../fonts relative to the css-file. In fact I put them there. But Symfony2 resolves this relative urls into an absolute path and does not find a route for that.

How can I solve this? I really feel like I didn't get a important part of the Symfony2 concepts here.

Answer 1

Use the cssrewrite filter provided by Assetic to correct the paths within your CSS files.

{% stylesheets filter='cssrewrite'
    'bundles/myassetbundle/css/bootstrap.min.css' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

Make sure that you are using the bundles/myassetbundle/... notation instead of the @MyAssetBundle one.

Read the Symfony docs about this matter.

Answer 2

I also had this issue.

The answer from @albertedevigo is working just fine but there might be a case when you need to take an additional precaution:

Make sure you have extracted the full bootstrap zip before moving its files in your web folder.

I first only moved them from inside the ZIP and they would appear in green in my windows explorer and I could not access them. So make sure you unzip the folder first before moving its content and have the full access write on the files.