Symfony 2.3 - Using Twitter Bootstrap 3 with LESS, installed as a vendor through composer setup, unable to access Glyphicons fonts

Question

I want to use the Twitter Bootstrap with Symfony 2 without using bundles. I've managed to install MopaBootstrapBundle, but decided to remove it and use plain TB.

Setup

composer.json

"require": {
    "twbs/bootstrap": "dev-master"
}

So, after installing with composer, the path [project_path]/vendor/twbs/bootstrap is identical to: https://github.com/twbs/bootstrap

config.yml

# Assetic Configuration
assetic:
    debug:          %kernel.debug%
    use_controller: false
    bundles:        [ ]
    filters:
        cssrewrite: ~
        less:
            node: /usr/bin/nodejs 
            node_paths: [/usr/lib/nodejs:/usr/lib/node_modules]
            apply_to: "\.less$"

I've created a new bundle for my project AcmeDemoBundle and added [project_path]/src/Acme/DemoBundle/Resources/public/less folder, containing two files:

• variables.less - a copy of [project_path]/vendor/twbs/bootstrap/less/variables.less that I can modify without affecting the original TB's package
• style.less

style.less contents:

@import "../../../../../../vendor/twbs/bootstrap/less/bootstrap.less";
@import "variables.less";

// any local changes should go below this line
[some local less code]

In base.html.twig

{% stylesheets '@AcmeDemoBundle/Resources/public/less/style.less' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

The Problem

Everything worked fine until I wanted to use the Glyphicons, included in Twitter Bootstrap.

<span class="glyphicon glyphicon-search"></span>

Glyphicons uses fonts to represent icons, located in Twitter Bootstrap here: https://github.com/twbs/bootstrap/tree/master/fonts

In order to use them, I had to create the following symlink.

[project_path]/web/fonts -> [project_path]/vendor/twbs/bootstrap/fonts/

In prod environment everything looks marvelous (except the font is displayed a little crispy), but in dev environment the font won't load because of /app_dev.php/ presence in the file location. So I get this error in the browser's console:

GET http://cmmp.localdev/app_dev.php/fonts/glyphicons-halflings-regular.woff 404 (Not Found) cmmp.localdev/app_dev.php/:1
GET http://cmmp.localdev/app_dev.php/fonts/glyphicons-halflings-regular.ttf 404 (Not Found) /app_dev.php/fonts/glyphicons-halflings-regular.ttf:1
GET http://cmmp.localdev/app_dev.php/fonts/glyphicons-halflings-regular.svg 404 (Not Found) /app_dev.php/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular:1

Using the cssrewrite filter only changes the errors in console for dev to:

GET http://cmmp.localdev/Resources/public/fonts/glyphicons-halflings-regular.woff 404 (Not Found) cmmp.localdev/:75
GET http://cmmp.localdev/Resources/public/fonts/glyphicons-halflings-regular.ttf 404 (Not Found) cmmp.localdev/:75
GET http://cmmp.localdev/Resources/public/fonts/glyphicons-halflings-regular.svg 404 (Not Found) cmmp.localdev/app_dev.php/:75

The question

I've been struggling for a few days now and, despite the many questions and solutions found here on StackExchange, I wasn't able to fix this.

What am I missing? How should I fix this?

Answer 1

I fixed this pretty simple and now I'm a bit ashamed of even asking. Although, I'm confident that this post will help others to better understand how to use Twitter Bootstrap with Symfony 2 without using any extra bundles:

The Solution

I had to change the Twitter Bootstrap's variable @icon-font-path to:

// original value "../fonts/"
@icon-font-path: "../../../fonts/";

So, instead of path:

http://cmmp.localdev/Resources/public/fonts/glyphicons-halflings-regular.woff

I have obtained:

http://cmmp.localdev/fonts/glyphicons-halflings-regular.woff

which points to aformentioned the symlink:

[project_path]/web/fonts -> [project_path]/vendor/twbs/bootstrap/fonts/

Note:

This works ONLY using the cssrewrite filter.