I want to use FontAwesome icons with my flags, ideally using the 'solid' / 'regular' states to emulate an 'on' / 'off' switch
I'll be using the thumbs-up icon as an example:
https://fontawesome.com/icons/thumbs-up?style=regular (off / outline)
https://fontawesome.com/icons/thumbs-up?style=solid (on / solid)
After installing flag, and creating my thumbs-up flag (ex. "like"), I'll copy the flag.html.twig to my theme folder and name it:
flag--like.html.twig
In the template file, I'll hijack this block to add a new class "fa-class" which represents the difference between solid / regular for Font Awesome:
{# Depending on the flag action, set the appropriate action class. #}
{% if action == 'unflag' %}
{% set action_class = 'action-unflag' %}
{% set fa_class = 'fa' %}
{% else %}
{% set action_class = 'action-flag' %}
{% set fa_class = 'far' %}
{% endif %}
and then in the link construction, I'll add my span class to output the icon with the correct state
<div class="{{classes|join(' ')}}"><span class="{{ fa_class }} fa-thumbs-up"></span><a{{ attributes }}>{{ title }}</a></div>
{% endspaceless %}