To convert an existing Icon Widget that uses Bootstrap Glyphicons to use Font Awesome Icons, follow the steps below to update the “icon” Custom Field Type in your Local or Global Custom Element.
 

Verify the Font Awesome Select ADF Custom Field Type

  1. In the CommonSpot Site Admin select from the Left Menu:

    • Elements & Forms > Field Types and Masks

  2. From the Field Types and Masks dialog scroll through the list to find:

    • Font Awesome Select Custom Field Type

  3. If the custom field type is installed skip the “Install” section (steps 4-12)
     

Install Font Awesome Select ADF Custom Field Type

  1. Download the latest version of the ADF from  http://community.paperthin.com/ADF

    • Expand the .zip archive to your local computer

  2. In the CommonSpot Site Admin select from the Left Menu:

    • Elements & Forms > Field Types and Masks

  3. From the Field Types and Masks dialog, click on the “Import Custom Field Type” link at the bottom of the dialog

  4. From the “Import Custom Field Type - Step 1 of 2” dialog, click on the “Choose File” button.

  5. Browse to the ADF 2.x files, go to \extensions\customfields\font_awesome_select\ directory

  6. Select the “Font-Awesome-Select-Custom-Field-Type.zip”

  7. Click Next

  8. From the “Import Custom Field Type - Step 2 of 2” dialog, select use existing resources or resolve and dependency issues.

  9. Click Import
     

Update the icon field in the Custom Element

  1. In the CommonSpot Site Admin select from the Left Menu:

    • Elements & Forms > Elements

  2. From the “Manage Elements“ dialog click the Pencil (edit) Menu for the Custom Element that contains the Bootstrap Glyphicons field you want to convert.

  3. From the Pencil (Edit) Menu select “Field Definitions”

  4. From the Custom Element FIeld Definitions dialog, click on the link or the pencil (edit) icon for the Glyphicons field.

  5. From the “Edit Form Field” dialog, under the “Standard Properties” tab, click on the “Type” dropdown selection list and select the “Font Awesome Select” custom field type.

  6. Click on the “Other Properties” Tab

  7. Check the box for “Include ‘fa’ Base Icon Class“

    • Select any other desired “Font Awesome” options

  8. Click Save
     

Add the resource loader to the the render handler code

  1. Make sure Font Awesome CSS library is a registered resource name or resource alias

  2. Open a copy of the render handler .cfm file in a code editor

  3. Add the resource loader call before the “getResource” check:

    • Application.ADF.scripts.loadResources("FontAwesome");

  4. Make sure the new render handler is a registered Render Handler of the CommonSpot Standard or Custom Element where the icon field is being used.

    • Or update the path of the Widgets current registered render handler point to the new render handler file.