Browser: Chrome 131.0.6778.205 (Official Build) (arm64)
OS: macOS
URL: I’m working locally
I’ve created a Component with an Icon element and embedded it within a page. While the icon displays correctly in the preview, it doesn’t appear when viewing the page at its URL.
Interestingly, if I explicitly add an icon directly to the page, the icon within the Component starts rendering correctly.
Hello @xuluwarrior,
I’ve tried creating a component from the Icon and choose an icon. But I can still see it.
Can you record a video of your setup, and step-by-step how to replicate it?
Thank you.
Matej
Very certainly same as WIP: Default Font Awesome icon of component not working
Hmm, could be. @xuluwarrior, can you confirm? Because if it is, then I’ll close this topic and connect it to the other one.
Best regards,
Matej
I have a component wrapped into a loop and it doesn’t render on the frontend, but does in the backend.
On a post details page without the loop, the icons renders perfectly fine.
Icons are still missing with RC2 on archive overview pages
There may be a mismatch in how data is passed within the loop
Hi @Maexxx,
can you export your component and paste it here? And can you please let me know in which template type you are testing?
I can’t replicate the issue anymore 
Thank you,
Matej
It is a standard Bricks page with looped cards (no component) that contains the address details as a single component (with hardcoded Fontawesome icons).
{
"components": [
{
"id": "ixdkxd",
"category": "",
"desc": "",
"elements": [
{
"id": "ixdkxd",
"name": "div",
"parent": 0,
"children": [
"e4431f",
"4cece0"
],
"settings": {
"_cssGlobalClasses": [
"pjnoaq"
]
},
"label": "Profile Meta Wrapper"
},
{
"id": "e4431f",
"name": "div",
"parent": "ixdkxd",
"children": [
"23d3aa",
"5ee7e5"
],
"settings": {
"_cssGlobalClasses": [
"mhvdrj"
],
"tag": "address",
"_position": "relative",
"_hideElementBuilder": false,
"_hideElementFrontend": false,
"_conditions": [
[
{
"id": "tbgwus",
"key": "dynamic_data",
"compare": "empty_not"
}
]
]
},
"label": "Phone Contact Info Bravo (CSS)"
},
{
"id": "23d3aa",
"name": "div",
"parent": "e4431f",
"children": [
"446212",
"2e1b75"
],
"settings": {
"_cssGlobalClasses": [
"hlmnio"
]
},
"label": "Content Wrapper"
},
{
"id": "446212",
"name": "heading",
"parent": "23d3aa",
"children": [],
"settings": {
"text": "Telefon",
"_cssGlobalClasses": [
"uputxu"
],
"tag": "h4"
}
},
{
"id": "2e1b75",
"name": "text-basic",
"parent": "23d3aa",
"children": [],
"settings": {
"_cssGlobalClasses": [
"vqnerm"
],
"link": {
"type": "external",
"url": "tel:{acf_contact_phone}"
},
"text": "{acf_contact_phone}"
},
"label": "Details"
},
{
"id": "5ee7e5",
"name": "div",
"parent": "e4431f",
"children": [
"df499c",
"kxrkyz"
],
"settings": {
"_cssGlobalClasses": [
"xszafw"
]
},
"label": "Icon Wrapper"
},
{
"id": "df499c",
"name": "icon",
"parent": "5ee7e5",
"children": [],
"settings": {
"icon": {
"library": "fontawesomeSolid",
"icon": "fas fa-location-dot"
},
"_cssGlobalClasses": [
"xdmusy"
]
},
"themeStyles": []
},
{
"id": "kxrkyz",
"name": "text-basic",
"parent": "5ee7e5",
"children": [],
"settings": {
"text": "Telefonnummer",
"tag": "span",
"_cssGlobalClasses": [
"itncdh",
"acss_import_hidden-accessible"
]
},
"label": "Label (Hidden Accessible)"
},
{
"id": "4cece0",
"name": "div",
"parent": "ixdkxd",
"children": [
"89689c",
"faa817"
],
"settings": {
"_cssGlobalClasses": [
"mhvdrj"
],
"tag": "div",
"_conditions": [
[
{
"id": "xddhyy",
"key": "dynamic_data",
"dynamic_data": "{acf_mail}",
"compare": "empty_not"
}
]
]
},
"label": "E-Mail Contact Info Bravo"
},
{
"id": "89689c",
"name": "div",
"parent": "4cece0",
"children": [
"f44542",
"22c2cf"
],
"settings": {
"_cssGlobalClasses": [
"hlmnio"
]
},
"label": "Content Wrapper"
},
{
"id": "f44542",
"name": "heading",
"parent": "89689c",
"children": [],
"settings": {
"text": "E-Mail",
"_cssGlobalClasses": [
"uputxu"
],
"tag": "h4"
}
},
{
"id": "22c2cf",
"name": "text-basic",
"parent": "89689c",
"children": [],
"settings": {
"_cssGlobalClasses": [
"vqnerm"
],
"tag": "p",
"text": "{acf_mail}",
"link": {
"type": "meta",
"useDynamicData": "mailto:{acf_mail}"
}
},
"label": "Details"
},
{
"id": "faa817",
"name": "div",
"parent": "4cece0",
"children": [
"81c31a",
"xurxja"
],
"settings": {
"_cssGlobalClasses": [
"xszafw"
]
},
"label": "Icon Wrapper"
},
{
"id": "81c31a",
"name": "icon",
"parent": "faa817",
"children": [],
"settings": {
"icon": {
"library": "fontawesomeRegular",
"icon": "fa fa-envelope"
},
"_cssGlobalClasses": [
"xdmusy"
]
},
"themeStyles": []
},
{
"id": "xurxja",
"name": "text-basic",
"parent": "faa817",
"children": [],
"settings": {
"text": "E-Mail Addresse",
"tag": "span",
"_cssGlobalClasses": [
"itncdh",
"acss_import_hidden-accessible"
]
},
"label": "Label (Hidden Accessible)"
}
],
"properties": [
{
"label": "Telefon",
"type": "text",
"id": "joiptt",
"connections": {
"e4431f": [
"_conditions|tbgwus|dynamic_data"
],
"2e1b75": [
"text"
]
}
},
{
"label": "Mail",
"type": "text",
"id": "ptoqfx",
"connections": {
"4cece0": [
"_conditions|xddhyy|dynamic_data"
],
"22c2cf": [
"text"
]
}
},
{
"label": "Mail Link",
"type": "link",
"default": {
"type": "meta",
"useDynamicData": "mailto:{acf_contact_mail}"
},
"id": "yszufq",
"connections": {
"22c2cf": [
"link"
]
}
},
{
"label": "Phone Link",
"type": "link",
"default": {
"type": "meta",
"useDynamicData": "tel:{acf_contact_phone}"
},
"id": "nmuyas",
"connections": {
"2e1b75": [
"link"
]
}
}
],
"_created": 1750025927,
"_user_id": 1,
"_version": "2.0-beta"
}
],
"globalClasses": [
{
"id": "pjnoaq",
"name": "profile-meta__wrapper",
"settings": {
"_display": "grid",
"_columnGap": "var(--content-gap)",
"_rowGap": "var(--content-gap)",
"_flexWrap": "nowrap",
"_direction": "row",
"_gridTemplateColumns": "var(--grid-1)",
"_gridTemplateColumns:mobile_portrait": "var(--grid-auto-2)",
"_gridGap": "var(--content-gap)"
},
"modified": 1750372372,
"user_id": 1
},
{
"id": "mhvdrj",
"name": "profile-meta__detail",
"settings": {
"_typography": {
"font-style": "normal"
},
"_display": "flex",
"_columnGap": "var(--fr-card-gap)",
"_cssCustom": ".profile-meta__detail {\n\t--icon-size: 1em;\n --icon-fill-color: transparent;\n --icon-stroke-color: var(--bg-dark);\n --icon-fill-color-hover: transparent; \n --icon-stroke-color-hover: var(--bg-dark);\n}",
"_direction": "row"
},
"modified": 1750030413,
"user_id": 1
},
{
"id": "hlmnio",
"name": "fr-contact-info-bravo__content-wrapper",
"settings": {
"_display": "flex",
"_direction": "column",
"_rowGap": "0"
},
"modified": 1736550401,
"user_id": 1,
"category": "jibplt"
},
{
"id": "uputxu",
"name": "fr-contact-info-bravo__heading",
"settings": {
"_typography": {
"font-size": "var(--text-s)"
}
},
"modified": 1736547595,
"user_id": 1,
"category": "jibplt"
},
{
"id": "vqnerm",
"name": "fr-contact-info-bravo__details",
"settings": {
"_typography": {
"text-decoration": "none",
"font-size": "var(--text-m)"
}
},
"modified": 1736547595,
"user_id": 1,
"category": "jibplt"
},
{
"id": "xszafw",
"name": "fr-contact-info-bravo__icon-wrapper",
"settings": {
"_display": "flex",
"_direction": "column",
"_cssCustom": ".fr-contact-info-bravo__icon-wrapper svg {\n height: var(--icon-size);\n width: var(--icon-size);\n fill: var(--icon-fill-color);\n color: var(--icon-stroke-color);\n}\n\n.fr-contact-info-bravo__icon-wrapper i {\n color: var(--icon-fill-color);\n font-size: var(--icon-size);\n}\n\n.fr-contact-info-bravo__icon-wrapper svg:hover {\n fill: var(--icon-fill-color-hover);\n color: var(--icon-stroke-color-hover); \n}\n",
"_alignItems": "center",
"_order": "-1",
"_padding": {
"top": ".5em",
"right": ".5em",
"bottom": ".5em",
"left": ".5em"
},
"_border": {
"radius": {
"top": "50%",
"right": "50%",
"bottom": "50%",
"left": "50%"
}
},
"_alignSelf": "center",
"_justifyContent": "center",
"_background": {
"color": {
"raw": "var(--bg-light)"
}
}
},
"modified": 1736547595,
"user_id": 1,
"category": "jibplt"
},
{
"id": "xdmusy",
"name": "fr-contact-info-bravo__icon",
"settings": {
"iconColor": {
"raw": "var(--primary-ultra-dark)"
}
},
"modified": 1736547595,
"user_id": 1,
"category": "jibplt"
},
{
"id": "itncdh",
"name": "fr-social-charlie__icon-label",
"settings": [],
"modified": 1736030801,
"user_id": 1,
"category": "jibplt"
},
{
"id": "acss_import_hidden-accessible",
"name": "hidden-accessible",
"settings": [],
"category": "acss"
},
{
"id": "mhvdrj",
"name": "profile-meta__detail",
"settings": {
"_typography": {
"font-style": "normal"
},
"_display": "flex",
"_columnGap": "var(--fr-card-gap)",
"_cssCustom": ".profile-meta__detail {\n\t--icon-size: 1em;\n --icon-fill-color: transparent;\n --icon-stroke-color: var(--bg-dark);\n --icon-fill-color-hover: transparent; \n --icon-stroke-color-hover: var(--bg-dark);\n}",
"_direction": "row"
},
"modified": 1750030413,
"user_id": 1
},
{
"id": "hlmnio",
"name": "fr-contact-info-bravo__content-wrapper",
"settings": {
"_display": "flex",
"_direction": "column",
"_rowGap": "0"
},
"modified": 1736550401,
"user_id": 1,
"category": "jibplt"
},
{
"id": "uputxu",
"name": "fr-contact-info-bravo__heading",
"settings": {
"_typography": {
"font-size": "var(--text-s)"
}
},
"modified": 1736547595,
"user_id": 1,
"category": "jibplt"
},
{
"id": "vqnerm",
"name": "fr-contact-info-bravo__details",
"settings": {
"_typography": {
"text-decoration": "none",
"font-size": "var(--text-m)"
}
},
"modified": 1736547595,
"user_id": 1,
"category": "jibplt"
},
{
"id": "xszafw",
"name": "fr-contact-info-bravo__icon-wrapper",
"settings": {
"_display": "flex",
"_direction": "column",
"_cssCustom": ".fr-contact-info-bravo__icon-wrapper svg {\n height: var(--icon-size);\n width: var(--icon-size);\n fill: var(--icon-fill-color);\n color: var(--icon-stroke-color);\n}\n\n.fr-contact-info-bravo__icon-wrapper i {\n color: var(--icon-fill-color);\n font-size: var(--icon-size);\n}\n\n.fr-contact-info-bravo__icon-wrapper svg:hover {\n fill: var(--icon-fill-color-hover);\n color: var(--icon-stroke-color-hover); \n}\n",
"_alignItems": "center",
"_order": "-1",
"_padding": {
"top": ".5em",
"right": ".5em",
"bottom": ".5em",
"left": ".5em"
},
"_border": {
"radius": {
"top": "50%",
"right": "50%",
"bottom": "50%",
"left": "50%"
}
},
"_alignSelf": "center",
"_justifyContent": "center",
"_background": {
"color": {
"raw": "var(--bg-light)"
}
}
},
"modified": 1736547595,
"user_id": 1,
"category": "jibplt"
},
{
"id": "xdmusy",
"name": "fr-contact-info-bravo__icon",
"settings": {
"iconColor": {
"raw": "var(--primary-ultra-dark)"
}
},
"modified": 1736547595,
"user_id": 1,
"category": "jibplt"
},
{
"id": "itncdh",
"name": "fr-social-charlie__icon-label",
"settings": [],
"modified": 1736030801,
"user_id": 1,
"category": "jibplt"
},
{
"id": "acss_import_hidden-accessible",
"name": "hidden-accessible",
"settings": [],
"category": "acss"
}
]
}
When adding an icon outside of the component, they load perfectly fine. So this is still a bug.
Hi @Maexxx,
thank you for the component. For me, the icons don’t show as well, but probably because I don’t have the same CSS variables as you. After changing the CSS of the wrapper element, then the icon shows - but I doubt this is the same issue for you.
Can you send temporary login credentials to your * website and a link to this topic to help@bricksbuilder.io using the email address you used during the purchase so we can take a look?
Thanks,
Matej
Maybe it is not necessary. I can tell you that FontAwesome is not loaded at all, wheras it is on the details page, where everything works.
What I use is a query loop of terms looping taxonomy and within query loop, I have a nested query loop showing people.