Browser: Chrome 110 OS: macOS / Windows / Linux / etc. URL: Link to a page that illustrates this issue Video: Short screen recording that illustrates this issue (free tool: jam.dev)
[Please describe this bug in as much detail as possible so we can replicate & debug this bug]
Now it seems there’s a page ID specific CSS sheet setting Bricks icon size to 60px, amongst some other accordion CSS in there? Can’t see where that sheet is served from though only it seems post/page specific:
There is a default icon font-size of 60px in Bricks. Usually when you add a custom class to the icon and specify a different font-size this takes precedence over the default style:
In your case, however, there seems to be a different loading order. Seems like you’re using Frames (class name fr-hero-bravo__top-link-icon). Maybe you can ask the Frames support first?
If you send some temporary credentials to help@bricksbuilder.io I’m happy to have a look at your exact setup. Please include a link to this forum thread.
I noticed the CSS was coming from 2 Bricks templates, present in the footer section, pulled in via a ‘Template’ block? When both of these were not pulled in this way, and present on the page as code, this wasn’t happening.
It’s a specificity issue in your specific setup that needs more than a quick fix. It is somewhat related to this discussion. We will definitely think about how to improve this in the future while still being backwards compatible and not excluding users on somewhat older browser versions.
Workaround for now is to set the icon size (var(--text-m)) on the ID level for your header icons.
I understand RE the ID level, also having the CSS inline works too - but affects speeds no doubt…
I only saw this when I made these into saved templates to use as dynamic conditional sections, they then acquired their own stylesheets and this order issue became apparent (I know you know this, just re-affirming - as without this and using the sections as ‘code’ - the icons were OK).
