As braincrafted/bootstrap-bundle now supports Font Awesome directly, this bundle is no longer maintained., (*1)
CodingfogeyFontAwesomeBundle
, (*2)
, (*3)
About
This Bundle makes it easy to integrate Font Awesome into your Symfony2 projects., (*4)
Prerequisites
- Font Awesome installed somewhere in your project. It is not contained in this bundle. You can use Composer, Bower or any other way to install it.
Installation
-
Add codingfogey/fontawesome-bundle to your composer.json:, (*5)
{
...
"require": {
...
"codingfogey/fontawesome-bundle": "dev-master",
"fortawesome/font-awesome": "v4.0.3"
}
...
}
-
Add CodingfogeyFontAwesomeBundle to your AppKernel.php:, (*6)
...
public function registerBundles()
{
$bundles = array(
...
new Codingfogey\Bundle\FontAwesomeBundle\CodingfogeyFontAwesomeBundle()
);
...
}
...
-
Update your dependencies: composer update., (*7)
NOTICE Installing Font Awesome via composer is optional but makes this bundle work out of the box. So I recommend this way., (*8)
Configuration
If you did not install Font Awesome via composer you have to configure the path to your installation:, (*9)
codingfogey_font_awesome:
assets_dir: %kernel.root_dir%/../vendor/fortawesome/font-awesome
Customization
If you want to customize Font Awesome you have to put a customized variables file somewhere in your project and configure the path. You also have to set the output path., (*10)
codingfogey_font_awesome:
filter: less
customize:
variables_file: %kernel.root_dir%/Resources/fontawesome/variables.less
font_awesome_output: %kernel.root_dir%/Resources/less/fontawesome.less
If you want to use the lessphp or sass Assetic filter you have to set the filter variable accordingly., (*11)
There is a command to generate a customized output file to incorporate your customized variables file:, (*12)
app/console codingfogey:fontawesome:generate
Usage
Installation of font files
The bundle provides a command to install the font files to the web/fonts directory:, (*13)
app/console codingfogey:fontawesome:install
There is also a ScriptHandler for conveniently doing this automatically on each composer install or composer update:, (*14)
...
"scripts": {
"post-install-cmd": [
...
"Codingfogey\\Bundle\\FontAwesomeBundle\\Composer\\ScriptHandler::install"
],
"post-update-cmd": [
...
"Codingfogey\\Bundle\\FontAwesomeBundle\\Composer\\ScriptHandler::install"
]
},
...
To include the Font Awesome css just include @fontawesome_css in your base template., (*15)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}
{% stylesheets
'@fontawesome_css'
%}
<link rel="stylesheet" href="{{ asset_url }}" media="screen"/>
{% endstylesheets %}
{% endblock %}
Adding icons
You can add icons as described here., (*16)
You can also use the handy Twig function., (*17)
NOTICE: This function does not work if you changed the @fa-css-prefix variable., (*18)
Simple icons
To insert a simple icon add {{ fa_icon( icon name|options ) }} into your template., (*19)
The parameter can be a string containing only the icon name without fa- prefix
or JSON for more customization. The complete set of options is as follows:, (*20)
{
icon: name of the icon without 'fa-' prefix
scale: [lg|2x|3x|4x|5x|stack-1x|stack-2x],
fixed-width: [true|false],
list-icon: [true|false],
border: [true|false],
pull: [left|right],
spin: [true|false],
rotate: [90|180|270],
flip: [horizontal|vertical],
inverse: [true|false]
}
Stacked icons
To insert stacked icons add {{ fa_icon( options, options [, container] ) }}
into your template. The first parameter is for the foreground icon, the second
is for the background icon. These have to be JSON because you have to provide
at least two parameters for each icon. The name of the icon and the scale., (*21)
The last parameter is optional and can contain options
for the container element. The complete set of container options is as follows:, (*22)
{
type: html element type for the container (default: span)
scale: [lg|2x|3x|4x|5x]
}
TODO
Look here., (*23)
License
- This bundle is licensed under the MIT License.
- For Font Awesome you can find licensing information here.
Acknowledgment
Wallogit.com
