Boostrap Twitter / Font Awesome Symfony
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 %}
UNE QUESTION SUR L'ARTICLE?
Initiation
HTML

CSS

PHP

PHP Avancé

Bootstrap

javascript / jQuery

MySQL

Symfony 2

Prestashop

Optimiser
