fl-icon class provides basic styling for controls presented in the form of an icon: a small graphical image users are expected to activate. These controls are typically implemented using an
<img>, but this is often implemented inaccessibly: alt-text may be missing or inappropriate. The
fl-icon class can be applied to a more semantically appropriate anchor tag (
<a>) which can be styled to appear as an icon using a background image. The
fl-icon class will move the link text out of the way so that it is not visible, but is still evident to users of assistive technologies.
The usefulness of the
fl-icon class is also evident when used with the (Floe) UI Options (2008-2009) transformations: Some themes will remove the icon altogether and display the link text to the user.
The mark-up and classes used to produce this layout:
The custom CSS: