Intégrer BOOTSTRAP Twitter

On pourrait utiliser un bundle pour intégrer Bootstrap Twitter à Symfony, il existe beaucoup de projets qui proposent cette fonctionnalité sur github. Il est cependant parfois inutile de se surcharger de bundles inutiles quand il s'agit d'intégrer deux fichiers.

Dans un premier temps, téléchargez la librairie Bootstrap Twitter depuis le site officiel. Ensuite copiez les fichiers qui vous intéresse dans votre Bundle.

Ensuite vous pouvez indiquer à Assetic que vous voulez utiliser les fichiers importés:

{% stylesheets  
'@ENGELAwesomeBundle/Resources/public/css/bootstrap/css/bootstrap.min.css' 
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

{% javascripts
'@ENGELAwesomeBundle/Resources/public/css/bootstrap/js/bootstrap.min.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}

Puis exécutez la commande suivante:

php app/console assets:install

Et voila Bootstrap Twitter est maintenant installé sur votre projet Symfony!

---

Vous pouvez également utiliser l'outil bower pour intégrer facilement vos librairies Javascript.

Pour cela exécutez la commande suivante dans le dossier contenant vos fichiers javascript:

bower install bootstrap

Si vous n'avez pas bower, je vous conseille de l'installer

sudo npm install -g bower

Attention il vous sera demandé en pré-requis NodeJS et Git

Intégrer Font Awesome

Que serait une application web sans Font Awesome? Je veux FONT AWESOME!!

Utilisons le bundle BmatznerFontAwesomeBundle pour intégrer Font Awesome:

Ajoutons le dans notre composer.json

// composer.json

{
    "require": {
        // ...
        "bmatzner/fontawesome-bundle": "~4.3"
    }
}

Indiquons à Symfony que nous voulons utiliser ce bundle:

// app/AppKernel.php

public function registerBundles()
{
    $bundles = array(
        // ...
        new Bmatzner\FontAwesomeBundle\BmatznerFontAwesomeBundle(),
        // ...
    );
}

Puis lancez la commande suivante:

php composer.phar update bmatzner/fontawesome-bundle

Et enfin intégrez le CSS dans votre template:

<link rel="stylesheet" type="text/css" href="{{ asset('bundles/bmatznerfontawesome/css/font-awesome.min.css') }}" />

Autre manière d'intégration de FontAwesome

Copiez les fichiers contenant la police d'écriture, otf etc. dans le dossier public de votre projet (app/Resources/public) puis indiquez à Assetic la configuration suivante:

assetic:
    debug:          "%kernel.debug%"
    use_controller: false
    bundles:        ['ENGELAwesomeBundle']
    #java: /usr/bin/java
    assets:
      font-awesome-otf:
        inputs: '%kernel.root_dir%/Resources/public/fonts/FontAwesome.otf'
        output: 'fonts/FontAwesome.otf'
      font-awesome-eot:
        inputs: '%kernel.root_dir%/Resources/public/fonts/fontawesome-webfont.eot'
        output: 'fonts/fontawesome-webfont.eot'
      font-awesome-svg:
        inputs: '%kernel.root_dir%/Resources/public/fonts/fontawesome-webfont.svg'
        output: 'fonts/fontawesome-webfont.svg'
      font-awesome-ttf:
        inputs: '%kernel.root_dir%/Resources/public/fonts/fontawesome-webfont.ttf'
        output: 'fonts/fontawesome-webfont.ttf'
      font-awesome-woff:
        inputs: '%kernel.root_dir%/Resources/public/fonts/fontawesome-webfont.woff'
        output: 'fonts/fontawesome-webfont.woff'

Si vos CSS comporte des images, préférez la syntaxe suivante qui renoommera les chemins des images présent dans le CSS grâce à l'option cssrewrite:

{% stylesheets 
    'bundles/engelawesome/css/*.css'
    'bundles/engelawesome/js/select2/*.css'  
    'bundles/engelawesome/css/global.css'
    filter='cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

Crée votre site web au meilleur prix💰