Custom GRAVITY control icons

Owned by Alexander Ziziko
Last updated: Aug 24, 2023 by Christoph Müller
2 min read

In GRAVITY, it is possible to change the icons for the GRAVITY control in the admin site or the icon for the 'Information Dock' in edit mode.

Admin users can use the Font Awesome Version 4 (Font Awesome Icons) and select an icon of their choice. By following some configuration steps, the selected icon can be applied.

Here is a step-by-step guide on how to change the control or the Information Dock icons in GRAVITY:

  1. Search and Select an Icon: Admin users should start by searching for the desired icon in the Font Awesome Version 4 library. They can browse through the icons or use the search functionality to find the icon they need. Once they have found the icon, they should make a note of the fa- value associated with it. For example, if they choose the "comments" icon, the fa-comments value will be used.

     

  2. Accessing the Configuration Fields: To change the GRAVITY control icon, select the site configuration you want to change it.
    - Navigate to the 'Control settings' section.
    - Look for the 'Icon for GRAVITY control' field.


    To change the ‘Information Dock’ icon:
    - Enter edit mode on the site you would like to change the ‘Information Dock’ icon
    - In the Callout Hub, click the ‘Gear’ icon and look for the field


  3. Use the fa- Value: Once the admin user has found the appropriate configuration fields, they can input the fa- value of the selected icon. For example, if the chosen icon is "comments" with the fa-comments value, the admin user should input "fa-comments" in the respective configuration field.

  4. Save and Apply Changes: After entering the fa- value in the configuration fields, save the changes. This will prompt GRAVITY to use the newly selected icon for the control or information dock.

  5. Verify the Changes: To ensure that the new icon is applied successfully, reload the site in the web browser.
    Check if the GRAVITY control or information dock now displays the chosen icon. If the selected icon is not appearing as expected, revisit the configuration fields and ensure that the fa- value was entered correctly.