Try ShortPoint nowBy default, when you have an icon in the Button Design Element, you don’t have the option to change its location:
This article will demonstrate how to move the icon using Custom CSS:
NOTEThis Custom CSS only works for Buttons without subtitle.
TABLE OF CONTENTS
Prerequisites
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
- You must already have a Button Design Element with an icon on your page.
Interactive Tutorial
Copy the code below before starting the tutorial:
display: flex; width: fit-content; flex-direction: row-reverse;
Step-by-step Tutorial
Follow the detailed guide below to learn how to change the location of Button icons:
Step 1: Edit the ShortPoint Web Part
- Go to the SharePoint page you want to use and click Edit:
- Click the close icon:
- Click the ShortPoint tag.
- Select the Edit Properties icon:
Step 2: Copy the code
- Copy the Custom CSS code below:
display: flex; width: fit-content; flex-direction: row-reverse;
Step 3: Edit the Button Design Element
NOTEBefore proceeding, make sure you already have a Button Design Element with an icon on your page. To learn how to add it to your page, check out How to Customize the Button Design Element.
- Click the Button tag:
- Select the cogwheel icon:
Step 4: Paste the code
- Click the next icon:
- Go to the Custom CSS tab.
- Paste the code.
Step 5: Save
- Click the green check mark once satisfied.
- Click the eye icon to see your page in real-time:
- Click Save to apply your changes:
That’s it! You can now move the Button icon using Custom CSS.
Related articles:
