Allow the use of iconfonts classes

Created on 28 March 2021, over 3 years ago
Updated 1 June 2024, 6 months ago

Problem/Motivation

I like this module and I find it really useful. However my customer wanted to use fontawesome icons instead of images. I thought that I could create an extended module to add a field in which you can enter the icon class you need, but finally I thought it again and I decided to create a patch for this module to add the mentioned functionality.

Proposed resolution

The attached patch adds a text field above the file upload field in which you can add the clases you need. Example of fontawesome icon : fas fa-thumbs-up can be used for the "like" reaction.

Remaining tasks

- An iconpicker could be added to make easier the selection of an icon. However it will restrict the use icon libraries to the one supported by the iconpicker (in this case fontawesome).

User interface changes

This is the view of the icon

Data model changes

A new property icon_class has been added to the mapping schema.

mapping:
    reaction:
      type: boolean
      label: 'Reaction'
    icon:
      type: string
      label: 'Icon'
    icon_class:
      type: string
      label: 'Icon class'
Feature request
Status

Fixed

Version

1.0

Component

Code

Created by

🇨🇭Switzerland juagarc4

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

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇳🇱Netherlands eelkeblok Netherlands 🇳🇱

    Yes, I agree. I like the idea of using a class a lot. We ourselves are replacing the default images with a reference to an SVG sprite, that sounds like something not too different from this.

    • cbc6a19d committed on 8.x-1.x
      Issue #3206095 by juagarc4, elaman: Allow the use of iconfonts classes
      
  • Status changed to Fixed 6 months ago
  • 🇰🇬Kyrgyzstan elaman

    I've added a feature to allow users to select icon type between:
    - uploaded image (current behavior, default)
    - remote image
    - html element (option to select between i, div, span

    Also I've added icon class setting, to applied to all of these types.

    Updated the twig file:
    - With new icon type rendering ways.
    - Added alt to img tags for accessibility.
    - Added aria-label to the html element icon type.

    Backward compatibility tested, shouldn't have to change anything and it shouldn't break anything in websites already using this module.

  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024