-
{{ fontawesome.icon('face-smile') }} -
{{ fontawesome.icon('face-smile', 'solid') }} -
{{ fontawesome.icon('github', 'brands') }}
Font Awesome for Cecil
This website is the demo of the Font Awesome component theme for Cecil: styles, webfonts and a Twig macro to display Font Awesome Free icons.
Include styles and webfonts in the <head>:
{{ include('partials/fontawesome.twig') }}Then import the macro and display an icon:
{% import 'macros/fontawesome.twig' as fontawesome %}
{{ fontawesome.icon(name, style, size, rotate, flip, attributes) }}style:regular(default),solidorbrands;size:2xs,xs,sm,lg,xl,2xlor1xto10x(optional);rotate:90,180,270or any custom angle, i.e.45or-30(optional);flip:horizontal,verticalorboth(optional);attributes: additional HTML attributes (optional,aria-hidden="true"by default).
Icons are a font, so they follow the text color and size.
Examples
-
{{ fontawesome.icon('star', 'solid', 'xs') }} -
{{ fontawesome.icon('star', 'solid', 'lg') }} -
{{ fontawesome.icon('star', 'solid', '2xl') }}
-
{{ fontawesome.icon('plane', 'solid', 'xl', '90') }} -
{{ fontawesome.icon('plane', 'solid', 'xl', '180') }} -
{{ fontawesome.icon('plane', 'solid', 'xl', '-45') }}
-
{{ fontawesome.icon('hand-point-right', size: 'xl', flip: 'horizontal') }} -
{{ fontawesome.icon('hand-point-right', size: 'xl', flip: 'vertical') }} -
{{ fontawesome.icon('hand-point-right', size: 'xl', flip: 'both') }}
-
{{ fontawesome.icon('heart', 'solid', 'xl', attributes: {style: 'color: #e63946'}) }} -
{{ fontawesome.icon('gear', 'solid', 'xl', attributes: {class: 'fa-spin'}) }} -
{{ fontawesome.icon('bell', size: 'xl', attributes: {'aria-hidden': 'false', 'aria-label': 'Notifications', role: 'img'}) }}