SOLVED: Icon element shrinks / looses style using a link and styling on ID

Bugs
1

Bricks Version: 1.5.1rc (but also in 1.5.2 also)
Browser: Brave / Chrome latest
OS: macOS
URL: Test

Applying a link to an icon element reduces the size of the icon and removes any coloring applied.

2

I can confirm this. I have icons with links. After the update from 1.5 to 1.5.2 the icons are no longer visible. When I remove the link everything is OK.

3

Hi Ian,
Thanks so much for your report!

I was able to reproduce the issue and added it to our bug tracker.
In the meantime, you can style on a class instead of the ID - that should work.

Best regards,
timmse

4

Hey guys,
The next update is coming early next week, but as a quick fix, you can replace line #3358 in wp-content/themes/bricks/includes/elements/base.php as follows:

Before:
if ( count( $attributes ) === count( $attributes, COUNT_RECURSIVE ) ) {

After:
if ( isset( $attributes[0] ) ) {

image
image2088Ă—1004 200 KB

Best regards,
timmse

4 Likes
5

…thank you for this patch @timmse works well for me :100: :sunglasses:

1 Like
6

Hi guys,
We’ve fixed this bug in Bricks 1.5.3, now available as a one-click update within your WordPress Dashboard.

Please let us know if you are still experiencing issues.

Best regards,
timmse

7

Hi @timmse , for me it’s fixed in 1.5.3. Thanks.

1 Like
8

Hi @timmse ,

I still have this bug in v1.8.3 : when I add an icon and style it with a class, as soon as I set it to be a link, the size can only be set using ID level. The size set through a class becomes effect-less, and only providing a ID size will have an effect.

9

Temporary workaround I found to style all icons together is to set a font size in the Typography tab on the parent container (using a class !), and setting “inherit” in the individual icon size fields (ID level).

10

Hey,
Your problem is not the one reported here :wink:

When you give the icon a class, the class is assigned to the icon. If you give the icon a link, the link gets the class because the classes are always applied to the parent wrapper.

If you want to add a class to the icon (and not to its automatically inserted wrapper when using a link), manually wrap it with a div you use as a link (set the tag to a). Or you use the workaround you mentioned, so that the font size gets inherited from the parent wrapper that has the class.