Additional icon classes not rendering

Created on 16 January 2021, almost 4 years ago
Updated 13 April 2023, over 1 year ago

Problem/Motivation

Classes entered in Additional icon classes field not rendering on frontend for me. Most icons appear fine, but some newer icons like Deezer needs the Fab class to render.

Steps to reproduce

Use the FontAwesome module with SWG/JS method
Enter fx fab fas far in the Additional icon classes configuration field under manage display
Save and check frontend. Icons like Deezer appear as question mark.

💬 Support request
Status

Fixed

Version

1.5

Component

Code

Created by

🇩🇰Denmark kristofferrom

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.

  • 🇩🇰Denmark kristofferrom

    Hi again. I'm having a similar issue with the TikTok icon that should be available as a free icon. If I add fa-brands via the inspector it appears, but when adding fa-brands to additional classes field in manage display, the class is rendered but commented out.

    Here's what my inspector gets:

    <!-- BEGIN OUTPUT from 'modules/contrib/linkicon/templates/linkicon-item.html.twig' -->
    <svg aria-hidden="true" class="svg-inline--fa fa-tiktok linkicon__icon icon" focusable="false" data-prefix="fab" data-icon="tiktok" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"></path></svg>
    <!-- <span aria-hidden="true" class="linkicon__icon icon fab fa-brands fa fa-tiktok"></span> Font Awesome fontawesome.com -->
    <span class="linkicon__text">TikTok</span>
    <!-- END OUTPUT from 'modules/contrib/linkicon/templates/linkicon-item.html.twig' -->
  • 🇮🇩Indonesia gausarts

    > when adding fa-brands to additional classes field in manage display, the class is rendered but commented out.
    You need to add fa to Prefix option, and fab fas far, not fa-brands to Additional classes. Please read more the descriptions.

    Also:

    1. Check your internet. Linkicon doesn't need it, FA likely does.
    2. Press F12 for Console, and fix any errors.
    3. At FA admin page, switch your option from SVG to HTML, and vice versa. Clear cache and verify in between.
    4. Open you FA CSS file, ensure .fa-tiktok is there.

    Hope one works :)

Production build 0.71.5 2024