How to Customize the Hover Color for Icons in the ShortPoint Icon List Design Element

By default, the Icon hover color for the Icon List is based on the Theme Color of your SharePoint page. 

This article will show three ways to change the Icon hover color. Follow the option that best suits your needs. 

TABLE OF CONTENTS

• Prerequisites
• Option 1: Change Icon Hover Color Using the Title Hover Color
  • Step 1: Edit the ShortPoint web part
  • Step 2: Edit the Icon List Design Element
  • Step 3: Customize the Icon Hover Color
  • Step 4: Save
• Option 2: Change Icon Hover Color Using Custom CSS 
  • Step 1: Edit the ShortPoint web part
  • Step 2: Edit the Icon List Design Element
  • Step 3: Copy the Custom CSS code
  • Step 4: Paste the Custom CSS code
  • Step 5: Save
• Option 3: Change Individual Icon Hover Colors Using Custom CSS 
  • Step 1: Edit the ShortPoint web part
  • Step 2: Edit the Icon List Design Element
  • Step 3: Copy the Custom CSS code
  • Step 4: Paste the Custom CSS code
  • Step 5: Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed for your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must already have the Icon List Design Element on your page.

Option 1: Change Icon Hover Color Using the Title Hover Color

This option allows you to change the Icon Hover Color using the Icon List’s built-in settings. Start the interactive tutorial or follow the instructions below to learn how you can do this.

Step 1: Edit the ShortPoint web part

• Go to the SharePoint page you want to use and click Edit.

• Click the ShortPoint tag.
• Select the pencil icon.

Step 2: Edit the Icon List Design Element

NOTEBefore proceeding, make sure you already have the Icon List Design Element on your page.

• Click the Icon List tag.

• Select the cogwheel icon.

• Navigate to the Advanced tab.

Step 3: Customize the Icon Hover Color

• Click Title Styles to see all the options under it.
• Look for Title hover color and choose the color you prefer. There are three ways to select the color you want:

	[1] type the HEX code of the color you want to use;
	[2] use the drop-down and choose from the list of colors available;
	Or [3] use the color picker and select your desired color.

• Once satisfied, click the green check mark.

Step 4: Save

• Then, click the eye icon to see your page in real-time.

• Click Save to apply all your changes.

Option 2: Change Icon Hover Color Using Custom CSS 

This option allows you to change the Icon Hover Color using Custom CSS. Before starting the interactive tutorial, copy the code below:

.sp-type-icon-list-item.shortpoint-listitem:hover .shortpoint-icon {
  border-color: tomato !important;
  background-color: tomato !important;
}

NOTEYou can change the icon border and background-color values.

Step 1: Edit the ShortPoint web part

• Go to the SharePoint page you want to use and click Edit.

• Click the ShortPoint tag.
• Select the pencil icon.

Step 2: Edit the Icon List Design Element

NOTEBefore proceeding, make sure you already have the Icon List Design Element on your page.

• Click the Icon List tag.

• Select the cogwheel icon.

Step 3: Copy the Custom CSS code

• Copy the Custom CSS below:

.sp-type-icon-list-item.shortpoint-listitem:hover .shortpoint-icon {
  border-color: tomato !important;
  background-color: tomato !important;
}

NOTEYou can change the icon border and background-color values.

.sp-type-icon-list-item:nth-of-type(1).shortpoint-listitem:hover .shortpoint-icon {
  border-color: tomato !important;
  background-color: tomato !important;
}

.sp-type-icon-list-item:nth-of-type(2).shortpoint-listitem:hover .shortpoint-icon {
  border-color: green !important;
  background-color: red !important;
}

.sp-type-icon-list-item:nth-of-type(3).shortpoint-listitem:hover .shortpoint-icon {
  border-color: yellow !important;
  background-color: yellow !important;
}

.sp-type-icon-list-item:nth-of-type(4).shortpoint-listitem:hover .shortpoint-icon {
  border-color: blue !important;
  background-color: blue !important;
}

NOTEYou can use different colors for each item.

NOTEYou can have more tahn 4 items. In this case, copy the CSS rule and then replace the item number in the parenthesis for nth-of-type selector (For example, the CSS rule for the 5th item will look like this: .sp-type-icon-list-item:nth-of-type(5).shortpoint-listitem:hover .shortpoint-icon ).

Step 1: Edit the ShortPoint web part

• Go to the SharePoint page you want to use and click Edit.

• Click the ShortPoint tag.
• Select the pencil icon.

Step 2: Edit the Icon List Design Element

NOTEBefore proceeding, make sure you already have the Icon List Design Element on your page.

• Click the Icon List tag.

• Select the cogwheel icon.

Step 3: Copy the Custom CSS code

• Copy the Custom CSS below:

.sp-type-icon-list-item:nth-of-type(1).shortpoint-listitem:hover .shortpoint-icon {
  border-color: tomato !important;
  background-color: tomato !important;
}

.sp-type-icon-list-item:nth-of-type(2).shortpoint-listitem:hover .shortpoint-icon {
  border-color: green !important;
  background-color: red !important;
}

.sp-type-icon-list-item:nth-of-type(3).shortpoint-listitem:hover .shortpoint-icon {
  border-color: yellow !important;
  background-color: yellow !important;
}

.sp-type-icon-list-item:nth-of-type(4).shortpoint-listitem:hover .shortpoint-icon {
  border-color: blue !important;
  background-color: blue !important;
}

NOTEYou can use different colors for each item.

NOTEYou can have more tahn 4 items. In this case, copy the CSS rule and then replace the item number in the parenthesis for nth-of-type selector (For example, the CSS rule for the 5th item will look like this: .sp-type-icon-list-item:nth-of-type(5).shortpoint-listitem:hover .shortpoint-icon ).

Step 4: Paste the Custom CSS code

• Navigate to the Custom CSS tab.
• Paste the copied code in the field provided.
• Modify the border-color and background-color values of each item according to your preference.
• Once satisfied, click the green check mark.

Step 5: Save

• Then, click the eye icon to see your page in real-time.

• Click Save to apply all your changes.

Congratulations! You now know three ways to change the Icon Hover Color according to the needs of your SharePoint page. 

Related articles:

• Custom CSS Tab for ShortPoint Design Elements
• How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial)
• Add Custom CSS to a ShortPoint Element right from the Page Builder (Advanced Tutorial)
• How to Set Icons Dynamically from a SharePoint List