Uploaded image for project: 'Fluid Infusion'
  1. Fluid Infusion
  2. FLUID-4934

Research the viability of using icon fonts in UI Options in order to simplify the styling process


    • Type: Task
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: None
    • Component/s: UI Options
    • Labels:


      Wiki page: http://wiki.fluidproject.org/display/fluid/Research+the+viability+of+using+icon+fonts+in+UI+Options

      Creating icons is fairly easy, and there are a lot of free font-icon sets online. The issue is not the icons, but an application that gives us the ability to create a font out of our icons, and a way to create metadata such as ligatures for them.

      The reason why we think Icomoon http://icomoon.io/ is our best option is because it provides us with a free offline application that gives us the ability to add our own icons (vectors) to their free icon sets. It also gives us the option to create ligatures for those icons. Free version of Icomoon has a CC Licence 'Attribution 3.0 Unported (CC BY 3.0)"

      Here are some other tools that we came across and might be useful:

      let us add our own icons

      Have ligatures (not changeable)

      Have ligatures (not changeable) - IE7+ support
      http://fico.lensco.be/#code2 (not free)

      Just icons

      not free

      Criteria used for evaluation:
      Illustrator: I used Illustrator to see what happens when we convert the icon fonts back to vectors, and also how the vectors would look if pixelated.
      InDesign: Testing OpenType options and abilities of the icon fonts.
      Chrome, Firefox, and Safari: Some of the icon font creators including Icomoon, contain an “index.html” file that could be tested with browsers. We tested this file with different browsers to see if the ligatures and text to speech work, and also to see if every icon is being rendered correctly.

      Font icons are great because we can easily:

      • Change the size and color - Shadow their shape
      • Have different icon sizes in the same font
      • Do everything image based icons can do, like change opacity or rotate.
      • Add strokes to them with text-stroke or add gradients/textures with background-clip: text;
      • Convert them to text

      They also have some drawbacks:

      • We cannot have two-toned icons.
      • We cannot have other languages in metadata, and space is not allowed between the words in the metadata.
      • Alignment could become an issue
      • IE8 and IE9 do not support font-icons with ligatures.

      But before doing anything with these icons, we need to conduct some tests:

      • Investigate and see if there is a way around for IE8/IE9.
      • Test and see if PUA (Private use area) works with screen readers in our supported browsers.


        1. tumblr_lj6mxvSCdK1qz4fzao1_1280.gif
          38 kB
          Arash Sadr
        2. UIO25490.zip
          158 kB
          Arash Sadr
        3. UIO-font-transformations.jpg
          307 kB
          Arash Sadr

          Issue Links



              • Assignee:
                arash Arash Sadr
                arash Arash Sadr
              • Votes:
                0 Vote for this issue
                5 Start watching this issue


                • Created: