FSS Advanced Layout - Icons

Icons

The 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.

Basic Icon

The mark-up and classes used to produce this layout:

<div class="fl-container-200 fl-centered">
    <a href="#_bottom" class="fl-icon mySettingsIcon" title="Link to Settings Tool">Settings</a>
</div>

The custom CSS:

.myCustomToolIcon {
    background-image: url(images/icon-Settings.png);;
}