Twig Font Awesome

Introduction

The Twig Font Awesome module provides a simple Twig function for inserting Font Awesome icons as inline SVGs.

Inline SVGs have many advantages over icon fonts (see https://css-tricks.com/icon-fonts-vs-svg). However, actually using them can be a bit of a hassle as SVG elements are bulky and difficult to identify in source code.

This module makes it possible to use inline SVGs from Font Awesome without having to deal with the actual SVG code.

Installation

1. Install the module as usual.
2. Upload the svgs folder from Font Awesome to /libraries/fontawesome/svgs. Both free and pro versions can be used.

Usage Example

Adding this to a Twig template:

{{ fa('solid', 'house') }}

Will output an inline SVG:

<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg>

API Reference

{{ fa(style, name, attributes) }}

style: Required. The icon style. Examples: 'regular', 'sharp-solid'

name: Required. The icon name without the 'fa-' prefix. Example: 'acorn'

attributes: Optional. An array of additional attributes to add to the SVG. Example: {class: 'hidden'}

Similar modules

• Font Awesome SVG: Provides icons through Icon API instead of a Twig function.
• Twig SVG: Works with SVG sprites instead of inline SVGs.