Style Icons in a Tab Container

Business Background

Adding icons into a tab container provides a business the lead in showing clear instructions at a glance, ensuring that text does not need to be localized.

Titan Solution

• Titan Web offers a range of icons to choose from for one or many tab containers.
• Titan Web allows the icons to be further customized, including styling options for fill, size, color, and more.

How to Video

• 0:01 An introduction to adding icons to tabs with Titan Web.
• 0:06 Learn how to add and configure a tab in your Titan Web project.
• 0:38 We show you how to add an icon to your tab.
• 1:26 Watch how to style the icons in your tab.

How to Guide

Add styling to the icon in a Tab Container. This is similar to the styling functionality on Stepper elements.

1. Navigate to Titan Web Application.
2. Click the expand (+) button next to the settings icon. A list of elements will show.
3. Select the Containers option from the list.
4. Drag and drop the Tab element to the canvas.
5. Click the Tab settings Gear icon. The Tab settings screen opens.
6. Click the Edit Mapping button under Content.

7. Click the Kebab menu next to each tab. The popup opens.
8. Select the Edit icon next to the Icon option. The Select icon screen opens.

9. Select an icon for each tab and click on the Apply button.

10. Click the Styling icon to design the Tab.
11. Select the Icon option. You can set the styling of the icon using the options on the right of the pop-up screen. For instance, you can change the size, color, and margin of the icon: