Today I learned that if you use Font Awesome icons in your text they won’t show up on browsers that don’t load Font Awesome. The space will still be there, but it’ll be blank.
Previously I really liked stuff like this [fa] fa-plus [/fa] Expand because it’s a really clean way to integrate text and icons. They are controlled from one place and they stay aligned. But today I loaded an app of mine on a government computer which has tight security settings. Apparently those settings include not loading the font that the icon comes from.
It’s an edge case, but if it’s important for your app to look the same everywhere, learn from my experience and don’t rely on dependencies that have to be loaded.
2 Likes
Thanks for the tip. Any workarounds or solutions you can share?
1 Like
One potential workaround is to place an icon and text element in a group, and style the group like a button. Then set all workflows to be when the group is clicked, instead of when the icon or the text is clicked. 
*I haven’t tested on a computer that doesn’t load font-awesome icons, so would be curious if it doesn’t show up using that method as well. When fonts are inside svg elements, they will not load on browsers that don’t have the font file, unless those icons are converted to shapes before saving as an .svg.
Would be great if we could get one solution that works consistently and doesn’t have any material UX problems.
I had updated all our buttons to be text that look like buttons so that I can put font awesome icons in them, but then discovered that these don’t get pressed when a user tabs to them and presses enter.
So, if any of you get to a solution that seems to be working across all major scenarios, let us know.
