This is used to create custom Icons that will replace existing icons via CSS.

Prior to changing the icons to new custom ones you must first name the files according to the current CSS Value.  The Best way to accomplish this is by using your browswers 'Developer Mode/Tools' .  These type of tools allow you to inspect each icon element and obtain the image css class name.  They all basically work the same, you press F12, click on the icon to 'Inspect Element' and either hover your mouse cursor over the object, or click on it, then it will display the class name.

Chrome Example of F12 Developer Tools to get the Class Name of an Icon

First step is to press F12 to open the Developer Tools Toolbox.

  1. Now Click the icon to 'Inspect Element'
  2. Hover your mouse cursor over the icon and you will then see its classname

Internet Explorer Example of F12 Developer Tools to get the Class Name of an Icon

First step is to press F12 to open the Developer Tools Toolbox.

  1. Now Click the icon to 'Inspect Element'
  2. Hover your mouse cursor over the icon and you will then see its classname

Firefox Example of F12 Developer Tools to get the Class Name of an Icon

First step is to press F12 to open the Developer Tools Toolbox.

  1. Now Click the icon to 'Inspect Element'
  2. Hover your mouse cursor over the icon and you will then see its classname

Save Icons for Upload

Now that you know the class name, simply save your image file with the classname.

Create a New Document

Create a New Document and upload the image file to this Document.  Refresh your browser and you will now see that the image is replaced with your new one.

  1. Configuration Desktop
  2. Document Listbox
  3. Create New Document
  4. Populate Title, Doc Number, and Revision
  5. Select Icon Document Type
  6. Upload any Custom GIF Images/Icons
  7. Move the Document from Pending to Active