Using FontAwesome icons with On/Off states with Drupal 8 flags module

fontawesome_flags.md

Using FontAwesome icons with On/Off states with Drupal 8 flags module

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 %}