How can we help you today?

How to Customize the Icon List Design Element

This article will showcase the customizing options available for the Icon List Design Element


Icon List


TABLE OF CONTENTS


Prerequisite

  • You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
  • You are a ShortPoint Designer with an active license.

Interactive Tutorial

Click Get Started to learn how to customize the Icon List Design Element:



NOTECheck out Icon List Features to learn more about the OOTB options you can customize.

Step-by-step Tutorial

Follow the steps below for a detailed guide on how to customize the Icon List Design Element:


Step 1: Edit the ShortPoint Web Part

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


Edit


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

Step 2:Insert the Icon List Design Element

  • Click the plus icon.
  • Use the search box to look for Icon List and click it.

Step 3: Edit the content

  • Click the cogwheel icon of the first item to edit its content.


cogwheel icon


  • Add a Title.
  • Add a Subtitle.
  • Add a Description.
  • Click the cross icon to delete the default icon and look for the icon you want to use.


cross icon

  • (Optional) Add a Link.
  • Repeat the same steps for the other items. 
  • (Optional) If you want to add another item, click Add New and repeat the steps above to edit its content.


NOTEYou can also create dynamic content using the ShortPoint Connect feature. To learn more about it, check out ShortPoint Connect: Basic Tutorial.

Step 4: Customize the Icon List’s design

  • Navigate to the Design tab.
  • Customize the look of the Icon List according to your preference.
  • Once satisfied, click the green check mark.


NOTECheck out Icon List Features to learn more about the OOTB options you can customize.

Step 5: Save

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


eye icon


  • Click Save to apply all your changes.


Save


Icon List Features

Below are the options you can find in the Icon List Settings window:


A. Items tab

The Items tab allows you to duplicate, delete, configure content, and add new items. It has the following options:


Items tab


ITEMS ACTION ICONS

Cogwheel iconCogwheel
opens a new window that allows you to edit the content of each item. See the table below for the cogwheel icon settings.
DuplicateDuplicateduplicates the item selected.
Trash iconTrash
deletes the item selected.

Add New
Add New
adds a new item.
Drag and DropDrag and Drop
allows you to re-arrange the position of the item.


COGWHEEL ICON SETTINGS (CONTENT TAB)

TitleTitleallows you to add item title.
SubtitleSubtitle
allows you to modify the subtitle.
DescriptionDescription
allows you to add a description.

Icon
Iconallows you to choose the Icon for each item.
LinkLink
allows you to add a link where users will be redirected when they click an item.

B. Design tab

The Design tab allows you to customize the look of the Icon List Design Element. It has the following options:


Design tab


Theme colorTheme Color
allows you to modify the color of the Icon. By default, it is set to the primary color of your SharePoint page.
Icon styleIcon Style
allows you to choose the style of the icon. You can choose from Normal, Square, Circle, Outline-square, or Outline-circle.
Icon SizeIcon Sizeallows you to modify the size of the icon.

Separator
Separator
allows you to choose whether to have a separator or not.
Separator colorSeparator color
allows you to change the color of the separator.
Separator sizeSeparator size
allows you to modify the thickness of the separator.
Horizontal viewHorizontal view
when enabled, it will showcase your items horizontally.
Maximum Items Per RowMaximum Items per row allows you to set the maximum number of items per row. By default, the horizontal view list will show 2 items per row.

C. Advanced Tab

The Advanced tab allows advanced styling customizations for the Icon List. It has the following options:


Advanced tab


MISCELLANEOUS

Text alignmentText Alignmentallows you to choose the alignment of the text in the Icon List. You can choose from Justify, Left, Center, or Right.
Vertical alignmentVertical Alignment
allows you to modify the vertical alignment of the Icon List. By default, it is set at the Top.
SpacingSpacing

allows you to control the overall spacing between list items. You can choose from Thin, Fat, or None.


ICON STYLES


No icon style
No Icon Style

allows you to choose what you want ShortPoint to do when there is no icon associated with an item. You have the following options:

  • Letter: will show the first letter of the title
  • None: will not show anything but keep the space
  • Empty: will not show anything and remove the space

Default icon
Default Icon
allows you to choose the default icon to show for all items.

Icon Color
Icon color
allows you to customize the color of the icon.

Icon Location
Icon Locationallows you to choose where the icon will be located. You can choose from Left or Right.

Icon vertical alignment
Icon vertical alignmentallows you to modify the vertical alignment of the icons.


TITLE STYLES


Title text size
Title Text Size allows you to adjust the text size of the title. The default size is 1 em.
Bold Title
Bold Titlewhen enabled, this will turn the title into bold.
Title colorTitle colorallows you to change the color of the title. By default, it is set to the primary color of your SharePoint page.
Title hover colorTitle hover color allows you to customize the color of the title when a user hovers over it. By default, it is set to a lighter shade of your primary color.
Title max linesTitle max linesallows you to set the maximum lines of the title to show.


SUBTITLE STYLES

Subtitle text sizeSubtitle Text Sizeallows you to adjust the text size of the subtitle.
Subtitle colotSubtitle colorallows you to change the color of the subtitle.
Subtitle LocationSubtitle Locationallows you to choose the location of your subtitle. You can choose to show it above or below the title.
Subtitle max linesSubtitle max linesallows you to set the maximum lines of the subtitle to show.


DESCRIPTION STYLES


Description text size
Description Text Sizeallows you to adjust the text size of the description.
Description colorDescription colorallows you to change the color of the description.
Description max linesDescription max lines allows you to set the maximum lines of the description to show.


LINK SETTINGS

Linking OptionsLinking Optionsallows you to choose how a link will open. You can choose from Lightbox, New Window, or Dialog.
Link styleLink Style choose how you want to showcase the link. You can choose to showcase it as the Title or as a separate Link Text.

Link Text
Link Textthe text that will be displayed as the clickable link. By default, it is set to Read More.


NOTETO learn more about Linking Options, check out Types of Linking Options.


ITEM BACKGROUND STYLES

Item background colorItem background color allows you to add a background color.

Item background hover color
Item background hover colorallows you to change the background color when a user hovers over an item.

D. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and Javascript code to customize the Icon List Design Element. 


NOTECheck out our support article on How to Insert Custom CSS into a ShortPoint Design Element (Basic Tutorial) to know more about Custom CSS.


Custom CSS tab


NOTEThe Connect and Visibility tabs are currently unavailable in Live Mode.


That’s it! You can now add Icon Lists to your SharePoint pages. It will surely level up the look of your page.  


Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 60 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more