FLUID-5079: Create non-transparent icons for Discovery Tool

Description

Investigate how to create an icon font that is not transparent.

For example, an icon of a circle will typically have a black outline and a transparent interior. But for the new Discovery Tool, we want the icon to have a solid colour in the middle.

Attachments

• FLUID-5079.zip
• FLUID-5079-final.zip
• 
• 

Comments

• Jonathan Hung commented 2013-07-03T09:05:10.708-0400

  A working implementation using two fonts stacked.

  • the background silhouette (background colour for the icon) appears in the :before pseudo element.
  • the foreground details appears in an element's :after pseudo element.
  • the foreground details position is adjusted using position:relative and left.

  @font-face {

  font-family: 'InfusionIcons';
  src:url('./fonts/InfusionIcons-test.eot?#iefix') format('embedded-opentype'),
  url('./fonts/InfusionIcons-test.eot'),
  url('./fonts/InfusionIcons-test.ttf');
  }

  .icon {
  font-family: 'InfusionIcons';
  background-color: #ffd429;
  width: 2em; /* give the container some width and height */
  height: 2em;
  }

  .icon:before {
  content: "\e002"; /* the background silhouette. */
  color: #ffffff;
  }
  .icon:after {
  color:#424242;
  content: "\e003"; /* the foreground of the icon (i.e. outline) */
  position:relative;
  left: -1.16em; /* lay it over the background silhouette. */
  }

• Jonathan Hung commented 2013-07-03T14:32:06.206-0400

  I did a few more experiments using this technique. The left position adjustment only needs to be done manually once and will hold true for all icon fonts of the same dimensions.

  For example, if all glyphs for a font is generated from a 24x28 canvas, then the left adjustment of -1.16em will work for all overlaid glyphs. If the font contains a mix of dimensions, then the left position adjustment will be different for each glyph of a particular size.

• Jonathan Hung commented 2013-07-05T14:13:57.390-0400

  Attached final Discovery Tool demo icons in FLUID-5079-final.zip. Includes font, CSS, HTML, and original assets.

• Justin Obara commented 2013-07-30T15:10:14.651-0400

  Merged into the gpii/prefsEditors repo ( https://github.com/GPII/prefsEditors ) at 8bae7e3054b40a585808f687967d8a697e848d4d