New Icon Library

Discover how the new Font Awesome icon library enhances user experience

Medical icons
By Kelsi Collins
1 min read

This article addresses the following topics:

  1. Overview of Updates
  2. Implementation Timeline
  3. Adding Icons
  4. Additional Resources

Overview of the Updates

The updated Icon component offers editors a diverse library of icons to enhance visual appeal and effectively present information across webpages. It features an expanded icon library and a user-friendly, searchable interface, giving users more options and making it easier to find and select icons. To make the transition as seamless as possible, we will swap out the legacy icons with comparable icons from the new library. This update addresses two key areas:

  1. Expanded Library: The new font library has almost 3,000 icons, including an expanded library of medical icons to better fit users’ needs.
  2. Searchable Icons: Unlike the legacy icon component, the new icon component allows you to search for icons using relevant search terms. You will no longer have to scroll to select the name of the icon. To improve user experience, there will be a preview image of the icons. 

Implementation Timeline

This feature will be available starting January 31, 2025.

Adding the Icon Component 

  1. Click the plus icon.
  2. Select Icon from the menu
Choose an icon component from the menu

Content 

  1. Select an icon. See examples of each icon type.
Interface to search and select icons
  1. Add Teaser text (optional).
    Note: Teaser text is limited to 300 characters
  2. Add an internal page or external link (optional).
    Note: Link text is limited to 45 characters.
Icon link and link text

Styles

  1. Toggle to the Styles tab.
Icon style options
  1. Select the appropriate layout options based on your desired layout.  (see below for examples).
  2. Select the desired Border color.
Border color
  1. Select the desired Border radius.
Select a border radius
  1. Select the amount of additional space you would like above the component. 

  2. Select the amount of additional space you would like below the component. 
    Note: By default, there is no space below a component.

     

Select the top and bottom margin spacing

Save

  1. Click Save.
  2. Scroll to the top of the page and click Save.
  3. Click the Done button beside the save button.
    Note: This will display the page in the closest representation of how site visitors will view it. All links and actions that are disabled in editing mode will be functional now.
     

Additional Resources

Co-working Sessions 
Register for the next Co-working Session for answers to your questions about this update.

Register for Co-working Sessions