How can we help you today?

How to Customize the Icon Design Element

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


Icon


TABLE OF CONTENTS


Prerequisite


Interactive Tutorial

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



NOTECheck out Icon 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 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 Design Element

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

Step 3: Edit the content

  • Click the cross icon to remove the default icon and look for the Icon you want to display.


cross icon


NOTECheck out our Icons page to see all the icons you can add to your SharePoint page using the Icons Design Element.


  • (Optional) Add a Link.

Step 4: Customize the Icon’s design

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


NOTECheck out Icon 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 Features

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


A. Content tab

The Content tab allows you to customize the content of the Icon. It has the following options:


Content tab


IconIconallows you to choose from a list of icons available and display it on your page.
LinkLinkallows you to add a link where users will be redirected when they click the icon.


NOTECheck out our Icons page to see all the icons you can add to your SharePoint page using the Icons Design Element.

B. Design tab

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


Design tab


StyleStyle
allows you to choose the style of the Icon. You can choose from Normal, Square, Circle, Outline-square, or Outline-circle.
SizeSizeallows you to modify the size of the Icon.
ColorColorallows you to change the color of the Icon.
Hover StyleHover Style

allows you to modify the animation that will happen when a user hovers over the Icon.

Linking optionLinking Option
allows you to choose how your link will open. Check out Types of Linking Options to learn more.

C. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and Javascript code to customize the Icon 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 Visibility tab is currently unavailable in Live Mode.


Congratulations! You can now make the most out of the Icon Design Element. Start adding Icons on your SharePoint pages now.


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