FLUID-6391: Updated the docs to reference Infusion-Icons

src/documents/tutorial-iconFonts/HowToCreateAndUseFontIcons.md

@@ -15,17 +15,16 @@ Some of the advantages of icons include:
 * Can add strokes, gradients, shadows, and etc.;
 * Convert to text (with ligatures);
 * Ligatures are read by screen readers;
-* Changing icons to fonts is as simple as changing the font-family in CSS.
+* Changing icons used is as simple as changing the font-family in CSS.
 
 However, there are some shortcomings to keep in mind:
 
 * Icon fonts are generally mono tone in colour.
 * IE8 and IE9 do not support ligatures.
-* Globally changing fonts will cause the text vs the icon to show.
+* Need to use `!important` or scoping to prevent globally changing fonts from swapping out the icons.
 * In situations where there is existing text accompanying an icon, specific markup containers need to be created for the
   icon.
-* Modifying icon fonts is as involved as generated a new icon graphic in the "traditional" way - there is no real time
-  saved in that regard.
+* Modifying the icon font requires generating a whole new font file
 
 ## Procedure Summary
 
@@ -56,15 +55,51 @@ Use illustration software to create an SVG version of the icon you want to use a
 
 Tips:
 
-* The dimensions of the graphic doesn't matter since everything will be scaled by the browser's font-rendering.
+* The dimensions of the graphic doesn't matter since everything will be scaled by the browser's font-rendering. However,
+  all of the icons should be sized and drawn in a consistent fashion.
 * Work in binary (i.e. black and white) and do not apply effects such as drop-shadows or embossing.
 * Sometimes the font conversion of the SVG may not work properly, so be prepared to edit your SVG file again.
 * Overlapping regions of shapes may cause a subtraction when converted in IcoMoon (i.e. it will render as transparent) -
   in this case you may need to build a single shape from these conflicting shapes, or ensure none of your shapes overlap.
 
 Download Example SVG file: [pencil-icon-01.svg](../images/pencil-icon-01.svg)
 
-## Step 2. Using IcoMoon to Generate Font
+Consult the [Infusion Icons Visual Style Guide](https://wiki.fluidproject.org/display/fluid/Infusion+Icons+Visual+Style+Guide)
+for how icons are created for Infusion.
+
+## Step 2. Generating the Font
+
+### Using Infusion-Icons to Generate the Font
+
+This is the preferred method for use with Infusion related projects because it makes modifying the font and tracking PUA
+codes much simpler. Once the [Infusion-Icons npm module](https://www.npmjs.com/package/infusion-icons), and all its
+dependencies, are installed, fonts can be generated with a config file.
+
+(See: [Infusion-Icons README](https://github.com/fluid-project/infusion-icons/blob/master/README.md) for more detailed
+instructions)
+
+#### Example
+
+```json
+{
+    "src": [
+        "svg/iconName.svg"
+    ],
+    "options": {
+        "font": "CustomIcons",
+        "codepoints": {
+            "iconName": "0xE000"
+        }
+    }
+}
+```
+
+```bash
+# generating an Icon Font from a config file
+grunt build --config="path/to/config.json"
+```
+
+### Using IcoMoon to Generate the Font
 
 Steps:
 
@@ -77,7 +112,7 @@ Steps:
     * Note: selecting the "Preferences" button will give you options to name your CSS classes and files. It i
       recommended you use identifiers
 5. Extract the contents of the ZIP file.
-    * The files we are most interested in are the `./fonts/*.eot`, `./fonts/*.ttf`, and the `./index.html` files.
+    * The files we are most interested in are the `./fonts/*.eot`, `./fonts/*.woff`, and the `./index.html` files.
 6. To verify that the font looks proper, open the `./index.html` file in a web browser. If the icon doesn't look right,
    you may need to edit the SVG file and repeat the font generation process.
 
@@ -107,8 +142,7 @@ Next, add the new font to the CSS markup.
 @font-face {
     font-family: 'CustomIcons';                /*Specify the new font */
     src: url('../fonts/CustomIcons.eot?#iefix') format('embedded-opentype'), /* IE8 fix. */
-         url('../fonts/CustomIcons.ttf'),
-         url('../fonts/CustomIcons.eot');
+         url('../fonts/CustomIcons.woff');
 }
 
 #contact_form {
@@ -123,8 +157,7 @@ Finally, add the new icon into the BEFORE pseudo class and delete any references
 @font-face {
     font-family: 'CustomIcons';                /*Specify the new font */
     src: url('../fonts/CustomIcons.eot?#iefix') format('embedded-opentype'), /* IE8 fix. */
-         url('../fonts/CustomIcons.ttf'),
-         url('../fonts/CustomIcons.eot');
+         url('../fonts/CustomIcons.woff');
 }
 
 #contact_form {
@@ -143,13 +176,13 @@ more information on this, please see
 
 ## Unicode for font
 
-_The Unicode (or "PUA code") for the custom font can be found in the HTML and CSS file generated by Ico Moon. If the
+_The Unicode (or "PUA code") for the custom font, generated by IcoMoon, can be found in the HTML and CSS file. If the
 HTML and CSS files are unavailable, you can retrieve the Unicode using one of the methods listed under the section
-"[Dealing with the TTF Unicode](HowToCreateAndUseFontIcons.md#dealing-with-the-ttf-unicode)" below._
+"[Dealing with the TTF Unicode](HowToCreateAndUseFontIcons.md#dealing-with-the-unicode)" below._
 
 **However, there is a problem** - the new icon font will replace the existing font of its container and all child
-*elements and therefore removing any font styling you may have wanted to preserve. The next section will outline common
-*issues and how to fix them and some best practices.
+elements and therefore removing any font styling you may have wanted to preserve. The next section will outline common
+issues and how to fix them and some best practices.
 
 ## Common Issues
 
@@ -224,11 +257,11 @@ body {
 It's common for images to be used in functional ways such as acting as a button within an anchor tag. For example:
 
 ```html
-<a href="download.html><img src="./images/download.png" alt="Download our latest stuff!"></a>
+<a href="download.html"><img src="./images/download.png" alt="Download our latest stuff!"></a>
 ```
 
-The problem here is if we replace the image in the anchor with an icon font, any text descriptions (the alt text) will
-be removed as well - causing a possible usability and accessibility issue.
+The problem here is if we replace the image in the anchor with an icon font, any text descriptions (the alt text)
+<!-- will be removed as well - causing a possible usability and accessibility issue. -->
 
 ```html
 /* The alt text is now gone, causing a usability and accessibility problem. */
@@ -266,7 +299,8 @@ rendered differently in Firefox in Mac OS X and in Windows despite being the sam
 ![a partially displayed font icon on firefox, Windows system](../images/Icon-FF-windows.png)
 
 To avoid these rendering problems, when creating the SVG images avoid using fine details - not only does this help
-eliminate details in the icon font being lost during rendering, it also helps improve usability through clearer icons.
+eliminate details in the icon font being lost during rendering, it also helps improve usability through clearer
+icons.
 
 ### IE8 Compatibility
 
@@ -286,11 +320,18 @@ The IE8 fix needs to be the first URL in the list of sources otherwise the font
 
 Reference: [http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax](http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax)
 
-### Dealing with the TTF Unicode
+### Dealing with the Unicode
+
+Infusion-Icons generates the icon font based off of a config where the Unicode values can be specified;
+IcoMoon conveniently generates an HTML and CSS file for custom fonts which contain the Unicode to be used in your
+markup. However, if the information about the Unicode values is lost, here are two ways to obtain them.
+
+#### Obtaining Unicode on the Web
 
-Ico Moon conveniently generates an HTML and CSS file for custom fonts which contain the Unicode to be used in your
-markup. However, in the scenario the original CSS or HTML files are unavailable, here are two ways to obtain the Unicode
-on Windows and Mac OS X 10.6+.
+1. Open a tool like [FontDrop!](https://fontdrop.info)
+2. Upload the font file
+3. Inspect the icon information to find the Unicode value.
+    * In FontDrop! the Unicode value will appear by hover over or clicking on the glyphs.
 
 #### Obtaining Unicode in Windows
 
@@ -301,26 +342,23 @@ on Windows and Mac OS X 10.6+.
 
 ![Unicode character map](../images/Unicode-charmap.png)
 
-#### Obtaining Unicode in Mac OS X 10.6 or Later
+## What about SVG Icons
 
-1. Enable Special Characters support as documented in this Apple Knowledge Base article:
-   [OS X Lion: Enter special characters and symbols](http://support.apple.com/kb/ph3871)
-2. Install the custom TTF font to the OS (usually double-click, then "Install").
-3. Launch the Font Book application.
-4. Also launch the Notes application.
-5. In Font Book, locate the custom font under Collection > All Fonts. Select it. The custom font should now appear in
-   the window.
-6. In Font Book, select / highlight the characters from the custom font. Select Copy (Command+C or right-click -> Copy).
-7. In Notes, Paste the text (Command+V or right-click -> Paste). The custom font should appear in Notepad.
-8. In Notes, select the pasted text. Then open the "Edit" menu an select "Special Characters".
-9. Now a "Characters" window appears with "Search" results containing each character selected in the previous step.
-10. Select an icon in the "Character" panel. The Unicode will appear in the right column.
+SVG icons can be used as an alternative to icons supplied through an icon font. Below is a quick summary of the pros and
+cons of SVG Icons. For more information on SVG Icons see the
+[Research SVG Icons](https://wiki.fluidproject.org/display/fluid/Research+SVG+Icons) wiki page.
 
-![Mac OS X Font Book](../images/mac-font-book.png)
+### Benefits of SVG Icons
 
-Above: An image showing the Mac OS X Font Book application with the custom characters highlighted.
+* Can use multiple colours
+* Can support complex icons including multiple colours
+  * although it increases the complexity to style with CSS
+* Don't have to compile into a font
 
-![Mac OS X Characters window](../images/mac-characters-window.png)
+### Drawbacks of SVG Icons
 
-Above: An image showing the Mac OS X Characters window. The Unicode value for a custom character appears in the right
-most column.
+* Less browser support, although modern browsers should handle most features
+* Many different ways to add to a page, but only those that allow access to the SVG markup will permit styling via CSS
+* Styling multi-coloured SVGs can be complex and may not always be supported
+* Depending on how they are added to the page, may make reading page markup harder
+* Depending on how they are added to the page, may increase transfer size due to lack of caching.

src/static/js/mini-search.js

@@ -1,4 +1,3 @@
-/* globals Fuse */
 /*
 
     A "mini search" that intercepts the normal form submission and ensures that search queries are properly encoded so

tests/testem-fixtures/js/search-tests.js

@@ -1,7 +1,7 @@
 /* globals jqUnit */
 (function (fluid, jqUnit, $) {
     "use strict";
-    fluid.registerNamespace("fluid.test.docs.search")
+    fluid.registerNamespace("fluid.test.docs.search");
 
     fluid.defaults("fluid.tests.search.searchCreationElement", {
         gradeNames: ["fluid.test.sequenceElement"],