This documentation is currently being moved to our new documentation site.

Please view or edit the documentation there, instead.

If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

Error rendering macro 'html'

Your Confluence administrator has disallowed the use of Javascript in the HTML macro. This setting can be changed using HTML for Confluence Configuration. Please see your administrator for details.

NOTE: FSS is deprecated as of 1.5

All Advanced Layout Examples

Tabs

Menus

Widgets

Icons

Layout Fix


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);;
}
  • No labels