You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
For later prettification process
Currently, Font Awesome icons don't render properly inside Stencil components despite loading the CSS via CDN. The icons work in the parent application but fail to display within the web components.
I think this is due to shadow DOM encapsulation in web components that prevents the Font Awesome styles from penetrating into the component, causing icons to fail to render.
I think this is due to shadow DOM encapsulation in web components that prevents the Font Awesome styles from penetrating into the component, causing icons to fail to render.
That's exactly right. Beyond that, even if we weren't using the shadow DOM it has never really sat quite right with me that we assume people will also be loading Font Awesome into their page/project -- sort of an unofficial peer dependency of widget.
I think there are a few different options to explore here. If we stick with a font-based approach we could look into using Stencil's global style functionality to make the font available to all components. Or we could look into SVG-based alternatives like Feather, Ionicons, Bootstrap Icons, etc, which usually can be integrated in a number of ways (including straight up copy-and-pasting SVG!)
Tried, ionicons, many problems out of the box like svg reading errors (more context if needed).
Feather Icons was awesome, worked out of the box, but no newspaper icons, not enough icons. Haven't checked bootstrap icons. At this point since we will need one or 2 icons, should we just handmade them and put them in assert folder
For later prettification process
Currently, Font Awesome icons don't render properly inside Stencil components despite loading the CSS via CDN. The icons work in the parent application but fail to display within the web components.
Current Implementation
Loading Font Awesome via CDN in the main HTML:
Attempted usage in component:
I think this is due to shadow DOM encapsulation in web components that prevents the Font Awesome styles from penetrating into the component, causing icons to fail to render.
cc @pkalita-lbl
The text was updated successfully, but these errors were encountered: