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)
I have a template which includes a special button, created as a component. The button component shows a themify icon after the button text.
I use this template on two different pages. On one page things are fine, on the other page the icon is not displayed. The HTML element for the icon is:
<i class="ti-arrow-right brxe-vzvuwt brxe-icon"></i>
Checking the style panel in the browser shows a difference. On the page where the icon is visible the style for the i-element gets styled by “@ layer bricks.icons” (which among other things sets the font-family to themify and defines the before content - which is the icon). On the page where the icon is not visible there is no “@ layer bricks.icons”. This explains why the icon does not appear.
The question is why the “@ layer bricks.icons” is loaded on one page, but not the other?
What I found was that if I add a random icon somewhere on the page where the icon is not displayed fixes the problem. So a temporary work-around is to add an icon with size 0 on the page.