In a discussion about stacking FontAwesome icons for badges, fysics suggests implementing stacked icons using fa-stack with child elements, noting it could enhance badge visuals. However, when attempting this, fysics finds it doesn’t render correctly — only one icon (e.g., Twitter) appears, while others (like logos or placeholders) fail to display. sam suspects missing CSS rules are to blame, advising to inspect the rendered HTML. fysics confirms the issue persists even when wrapping everything inside the correct class, indicating it’s more than a simple CSS omission. sam concludes it’s likely a bug that should be fixed. fysics admits they didn’t realize stacking was even supposed to be supported — but now hopes it will be, calling the idea awesome. The thread highlights a gap in badge icon functionality and calls for a fix to enable visually richer, stacked FontAwesome icons.
Stacking FontAwesome icons can result in some pretty neat looking glyphs. It would be nice to be able to stack icons like this when specifying the icon for a badge.
It involves a parent element with fa-stack class, then two child elements for each stacked image.
Rather than catering to this specific use case, is there a way the badge system could be expanded to allow arbitrary html for the badge image in such a way that isn’t a support nightmare?
Have you tried entering html?
It doesn’t exactly break, but it also doesn’t work. The twitter example only shows the twitter logo, and the other examples don’t display an icon at all. (Even the placeholder glyph.)
That is very likely due to missing CSS rules. Look at the HTML it renders.
This looks like a bug to me then. We should get that fixed.
I didn’t realize it was supposed to allow arbitrary html, but yes, that would be awesome!
