NOTE: FSS is deprecated as of 1.5

All Advanced Layout Examples
Tabs
Menus
Widgets
Icons
Layout Fix

NOTE: FSS is deprecated as of 1.5

FSS Documentation

Fluid Skinning System - FSS
FSS Naming Conventions
FSS Cheat Sheet
Mobile FSS Cheat Sheet

Demos: Columns
Demos: Tabs, Menus, etc.
Demos: Text
Demos: Themes

HTML and CSS Background
CSS Bugs, Gotchas

Still need help?

Join the infusion-users mailing list and ask your questions there,
or hang out in our IRC Channel.

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);;
}

Browser not supported