FLUID-4949: Add icon fonts to the UIO demo

Description

Environments

Using the icon fonts from FLUID-4934, add them to the UIO demo.

Attachments

• UIO70427.zip

Comments

• Arash Sadr commented 2013-03-27T11:07:09.896-0400

  I will upload the latest icon fonts here, replacing them with the older ones.

• Jonathan Hung commented 2013-03-28T07:18:48.342-0400

  The following are instructions on how to update the CSS and HTML for new fonts.

  Step 1 Preparation:
  1. Download and extract new font bundle.
  2. Load Index.html from the font bundle in a browser
  3. Open Index.html in an editor so you can see the markup.
  4. Copy the *.EOT, *.WOFF, and *.TTF font to the destination /font directory

  Step 2 Integration:
  1. In the browser with the loaded Index.html file, locate the class-name of the font you want. This can be found in the bottom half of the page and should show the icon with the classname "icon-<something>" below.
  2. In the editor with the loaded index.html file, search for the classname matching the icon you want.
  3. Locate the second instance of the classname and copy the entire .icon-<name>:before { content: ashgdhasgdjad } block.
  4. Paste this block into font section of UIOptions.css.
  5. Prefix name the class from .icon-<name> to .fl-icon-<name>
  6. Go back to the editor with Index.html
  7. Copy the two @font-face blocks (should be roughly lines 5 to 15) at the top of the file.
  8. Paste and replace the two @font-face blocks in the font section of UIOptions.css file.

  Note: #7 and #8 above are critical, otherwise the icon font will not appear.

  9. Now with styles and fonts in place, you can add .fl-icon-<name> to your HTML markup and the icon should appear.