🚀 Pro version launching soon! Be among the first 100 subscribers to get 50% off. Subscribe now

Login

|

Ldogin
Download

Using Icons Inside Tabs

Enhance your tab navigation by adding icons alongside text labels. Icons can help users quickly identify content and improve the visual appeal of your tabs.

Prerequisites

  • Easy Tabs Block is installed and activated.
  • Icon Block plugin by WordPress.org is installed (free) for icon support. overview

Step-by-Step Guide

  1. Insert the Tabs Block
    • In the Gutenberg editor, click Add Block (➕) and search for “Tabs”.
    • Select the Easy Tabs Block to insert your tab container.
  2. Add or Edit a Tab Button
    • Within the Tabs block, find the Tab Button you wish to modify.
    • Click on its label to bring up the toolbar and block settings.
  3. Insert an Icon Block
    • With the Tab Button selected, click the Add Block inserter inside the button area.
    • Search for and insert the Icon block provided by the Icon Block plugin.
  4. Choose and Customize Your Icon
    • In the Icon block settings, select an icon from the library (e.g., Font Awesome, SVG).
    • Use the Block Sidebar controls to adjust icon size, color, and alignment.
  5. Add Tab Text Label
    • After the icon, click to add a Paragraph or Heading block for your tab label.
    • Type your label (e.g., “Features”, “Pricing”).
  6. Arrange Icon & Text
    • Use drag-and-drop or flex settings (if supported by your theme) to align the icon and text horizontally.
    • Adjust spacing using the block’s Padding and Margin controls for perfect alignment.
  7. Preview and Publish
    • Click Preview to see how your icons look on desktop and mobile.
    • When satisfied, click Publish or Update to save your changes.

Tips & Best Practices

  • Consistent Style: Use icons from the same set to maintain visual consistency.
  • Accessibility: Add descriptive ARIA labels to icon blocks for screen readers.
  • Responsive Alignment: Check icon size and spacing on mobile—icons can appear larger on small screens.
  • Hover & Active Effects: Customize icon colors for hover and active states in the Tab Button style settings.

With icons in your tabs, you can create more engaging, user-friendly navigation that guides visitors to key content at a glance!