Iconpicker does not render classes appropriately

Created on 10 August 2023, over 1 year ago
Updated 3 January 2024, 12 months ago

Problem/Motivation

A recent change in the closed related issue has potentially broken our Font Awesome implementation.

The values in our Font Awesome style dropdown in our page form show "fas", "fab", etc. In combination with the change from issue 3376882, it is now printing "fa-fab" as the main Font Awesome style/weight class which is not a valid Font Awesome class.

Steps to reproduce

1. Insert a Font Awesome icon on a page using a Font Awesome field, setting the style to "Regular".
2. View rendered page - it now prints "fa-far" on the icon <i> instead of "far" or "fa-regular".

Proposed resolution

The simplest solution seems to be checking and replacing the older "fas", "far", etc values with the corresponding expanded style of "solid", "regular", etc in determinePrefix() which already handles "brands".

An alternative would be to create another function to verify and replace this if the containing value starts with "fa", since I don't believe any of the weight options have "fa" in their name.

πŸ› Bug report
Status

Needs work

Version

2.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States agbockus Illinois

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @agbockus
  • Status changed to Postponed: needs info over 1 year ago
  • πŸ‡ΊπŸ‡ΈUnited States daniel.moberly

    I suspect this might be due to old data already being saved. If you change the icon to a new one, does it render properly (with the new prefixes)?

  • πŸ‡ΊπŸ‡ΈUnited States agbockus Illinois

    During testing, I made sure to test on a new page and inserted a new icon ("fa-house") which resulted in <i class="fa-fas fa-house"></i> being printed.

  • πŸ‡ΊπŸ‡ΈUnited States daniel.moberly

    This is strange, I can't reproduce. Are you inserting with an actual icon field, or are you using the CKEditor button?

  • πŸ‡ΊπŸ‡ΈUnited States agbockus Illinois

    This is from inserting using the actual icon field.

    When I inspect the select dropdown, all the values are still "fas", "fab", etc. Are they supposed to be showing "solid" and "brands"?

  • Status changed to Needs review over 1 year ago
  • πŸ‡ΊπŸ‡ΈUnited States daniel.moberly

    I tracked this down. The iconpicker submodule does not render classes appropriately (has not been updated to use the new fa-solid prefix rather than fas).

    Attaching patch - please confirm this fixes your issue

  • Status changed to Needs work about 1 year ago
  • πŸ‡ΊπŸ‡ΈUnited States pookmish

    The provided patch does not fix anything. When using the provided field widget only (not the submodules at all), the classes for the icons in the autocomplete do not match FontAwesome 5 classes. They do however match FontAwesome 6.

    Take for example the `drupal` icon: Using FA5 the appropriate classes are 'fab fa-drupal'. But in the autocomplete controller, the brands are prefixed with 'fa-brands'. This matches the FA6 version of the "drupal" icon though.

    The good thing for me is that the displayed classes using the included field widget render correctly.

    I do believe this module should definitely support the FA6 classes, but also the FA5 classes.

  • πŸ‡ΊπŸ‡ΈUnited States agbockus Illinois

    I believe I found the issue - I've attached my current patch as a starting point, but it doesn't take into consideration other work or changes that might exist in other areas of the module - and also ignores FA5 compatibility.

    Mostly, the issue (in the latest 8.x-2.x branch) is at line 639 in src/Plugin/Field/FieldWidget/FontAwesomeIconWidget.php. This seems to prepend the selected icon style with fa- which is giving us the incorrect class(es) on the icon when printed. Related: the available options are on line 119, but the following lines of code seem to be removing styles without checking if their Sharp alternatives are still enabled.

    ---

    Since the module is prepending fa- it either needs to change the available style values to the words of the styles (e.g. 'solid' instead of 'fas') or remove the prepending functionality on line 639. Either way, we could check to see which value is added, and simply add the _additional_ class for the previous or next version.

    Example: If the module implements the full word option, then if the value is set to 'solid', prepend fa- and then append fas.

    This would make it work for both FA5 and FA6, I think.

Production build 0.71.5 2024