Versatile Banner: Icons disappeared with latest updates

AI-generated summary

The Versatile Banner component has a bug causing icons to disappear after the latest updates. craigconstantine shared screenshots showing the issue, where icons are not displaying despite being set in the banner settings. Lilly suggested checking the theme component version and Discourse version, and after testing, found that removing the fa- or far- prefixes from the icon names resolves the issue. craigconstantine confirmed this fix. Lilly noted that the icon field descriptions may need to be updated for clarity. awesomerobot apologized for the issue, explaining that an icon name converter was missed during updates, and will add it back in and update the setting description. The old icon names will work again after the update, but removing prefixes is a temporary workaround.

Banner background is set to blank (no bg image).
background color #fff
secondary text color #000 (should be icon color, right?)
and column icons are…

I have the banner only showing for anonymous users.
After updating to latest…

1 Like

This component was recently updated

https://meta.discourse.org/t/versatile-banner/109133/353?u=lilly

Can you make sure the theme component version you have is updated and that you are also running one of the most up to date Discourse versions?

1 Like

i’m on hosted discourse, newest component as per subject.

2 Likes

I just tested it and it works if you remove the far and fa from the icon names (ie: comments, question-circle, user-plus).

3 Likes

oh! good insight.

I changed one from fa-user-plus to just user-plus and that one now shows up.

Clearly a bug then. A recent/latest release changed this behavior. The comment/instructions next to icon fields needs to be updated, or the behavior fixed to take proper fa-foo-bar style of specifying Font Awesome icons…

2 Likes

Yea the icon field descriptions may need to be updated for clarity. @awesomerobot :slight_smile:

Use font awesome or a link to an image for the icon at the top of the columns. Accepted font awesome formats: fa-icon , far fa-icon or fab fa-icon . Click Here to view the list of available icons.

2 Likes

Sorry for the trouble with this, looks like I missed the icon name converter we had in place when I was making updates. I’ll get that added back and also update the setting description (FIX: add icon converter back, update setting by awesomerobot · Pull Request #20 · discourse/discourse-versatile-banner · GitHub). The old icon names will work again after the update, but as discovered, removing the prefixes will work for now (and will also continue working after the update is merged).

3 Likes