The Font Awesome component theme for Cecil provides helpers to use Font Awesome icons.
composer require cecil/theme-fontawesomeOr download the latest archive and uncompress its content in
themes/fontawesome.
Add fontawesome in the theme section of the config.yml:
theme:
- fontawesomeInclude styles and webfonts in the <head> of your template:
{{ include('partials/fontawesome.twig') }}By default, it includes regular, solid, and brands icons, but you can select only the one(s) you want using the
stylesarray, i.e.:{{ include('partials/fontawesome.twig', {styles: ['brands']}) }}
Then import macro in your template:
{% import 'macros/fontawesome.twig' as fontawesome %}Display the desired icon:
{{ fontawesome.icon('<name>', '<style>', '<size>', '<rotate>', '<flip>', '<attributes>') }}<name>: name of the icon<style>: style ("regular", "solid" or "brands". "regular" by default)<size>: font size (optional)<rotate>: rotation in degrees ("90", "180", "270" or custom)<flip>: flipping ("horizontal", "vertical" or "both")<attributes>: additional HTML attributes (optional)
{{ fontawesome.icon(name:'github', style:'brands', size:'xl', attributes:{style: 'color: #333'}) ~}}<i class="fa-github fa-brands fa-xl" style="color: #333">