Symfony2 - Use Bootstrap (glyphicon) and jQuery

0
votes

I am a beginner with Symfony and I am trying to integrate a specific Bootstrap theme and jQuery.

Because of the css files, the js files and the fonts are shared by all the bundles, I put the resources into the app\Resources\public directory.

In this directory, I have the following architecture :

  • css
    • bootstrap.min.css
    • jquery-ui.min.css
    • my-css.min.css
  • fonts
    • glyphicons-halflings-regular.eot
    • glyphicons-halflings-regular.svg
    • glyphicons-halflings-regular.ttf
    • glyphicons-halflings-regular.woff
  • js
    • bootstrap.min.js
    • jquery-1.9.1.min.js

I also have a layout.html.twig file in the app\Resources\views directory which is my main layout. In this layout, I load the css and the js files with the following twig blocks :

<!-- CSS -->
{% block stylesheets %}
  {% stylesheets filter='cssrewrite'
    '../app/Resources/public/css/bootstrap.min.css'
    '../app/Resources/public/css/jquery-ui.min.css'
    '../app/Resources/public/css/my-css.min.css'
  %}
  <link href="{{ asset_url }}" rel="stylesheet" media="screen">
  {% endstylesheets %}
{% endblock %}

<!-- JS -->
{% block JavaScript %}
  {% javascripts
    '../app/Resources/public/js/jquery-1.9.1.min.js'
    '../app/Resources/public/js/bootstrap.min.js'
  %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
  {% endjavascripts %}
{% endblock %}

The CSS files are correctly loaded in my pages, but I have an error when I use glyphicon. The icons, on a button for example, are not loaded and in the console of Firefox, I have an error 403 : 

GET 
http://localhost/mylibrary-web/app/Resources/public/fonts/glyphicons-halflings-regular.woff [HTTP/1.1 403 Forbidden 4ms]

I try to modify the security.yml file without success :

firewalls:
    dev:
        pattern: ^/(_(profiler|wdt|error)|css|images|js|fonts)/
        security: false

How can I authorize the access to the fonts directory ? Thx for your help !

2
twitter-bootstrapsymfonysymfony-2.6
You are not supposed to use absolute path like that in assetic. You either provide the short syntax that would be eventually parsed by Symfony: @AcmeBarBundle/Resources/public/js/form.js or use the path that starts from your web folder: 'bundles/app/css/*' Pay attention to your URL, it should not lead to /app/ at all! Take a look at the documentation symfony.com/doc/current/cookbook/assetic/asset_management.html - Artamiel
So it means that I should not put my resources into the app directory event if they are globals to the app and not specific to a bundle ? I should put the resources into a bundle or directly into the web folder ? That's right ? - rolandl
If your resources are considered non-bundle specific, then I suppose - yes, you can put them in your web folder to be accessed properly. Otherwise, you can use your bundle Resources folder and simply use the option --symlink for generating assets. - Artamiel

2 Answers

0
votes

I assume you haven't configured your web server properly. If you use Apache server, you can configure it in this way: https://github.com/fontello/fontello/wiki/How-to-setup-server-to-serve-fonts

0
votes

I finally decided to work without Assetic...

I put the CSS, JS and font files directly into the web\bundles\app directory of the project and use the following code to import the CSS or JS in my Twig layout : 

<link href="{{ asset('bundles/app/css/bootstrap.min.css') }}" rel="stylesheet" media="screen">
<link href="{{ asset('bundles/app/css/jquery-ui.min.css') }}" rel="stylesheet" media="screen">
<link href="{{ asset('bundles/app/css/custom.min.css') }}" rel="stylesheet" media="screen">

It is not the best solution but it works :)