FLUID-4182: Figure out what fl-icon is doing

Description

What is it? Do we need it? Does it work as it should?

It is using text-indent.

Comments

• heidi valles commented 2011-04-12T13:19:33.860-0400

  Seems to be based off of jquery ui's ui-icon class:

  .ui-icon: Base class to be applied to an icon element. Sets dimensions to 16px square block, hides inner text, sets background image to "content" state sprite image. Note: .ui-icon class will be given a different sprite background image depending on its parent container. For example, a ui-icon element within a ui-state-default container will get colored according to the ui-state-default's icon color.

  After declaring a ".ui-icon" class, you can follow up with a second class describing the type of icon you'd like. Icon classes generally follow a syntax of .ui-icon-{icon type}{icon sub description}{direction}. For example, a single triangle icon pointing to the right looks like this: .ui-icon-triangle-1-e

• heidi valles commented 2011-04-12T14:19:37.647-0400

  fl-icon in fss-layout.css doesn't seem to be used at all in any of the demos etc. But it seems to just establish a 16x16 space, and move the text out. A user would then add another style for their particular icon image to be dropped into this space. The benefits of doing this vs. just having an image with alt-text: themes can replace the image with the normally hidden text.

  fl-icon seems to be used differently in fss-mobile-layout.css where it's just used to establish icon sizes.

• heidi valles commented 2011-04-12T16:05:58.983-0400

  TO DO: .fl-theme-hc .fl-widget .fl-icon AND .fl-theme-hci .fl-widget .fl-icon should be changed in both theme files to not require the icon be within .fl-widget.

• Justin Obara commented 2011-04-26T15:03:25.271-0400

  This has been pushed into the project repo at efe30ec57ff1a3be3400b6dff986b683678c4bdb