Giving tabs an icon

The tabs widget uses anchor elements, which when clicked, activate the various tab panels to reveal their content. This anchor element only displays text by default, which is good enough under the vast majority of circumstances. There are other times, however, where the tab link itself would benefit from an icon. For example, a house icon helps quickly cue what is in the panel content before actually activating it. Let's look at how we can extend the tab's capabilities to support using both an icon and text as the tab button.

How to do it...

We'll create a basic tabs div to support our widget that looks like the following:

<div id="tabs">
    <ul>
        <li data-icon="ui-icon-home">
            <a href="#home">Home</a>
        </li>
        <li data-icon="ui-icon-search">
            <a href="#search">Search</a>
        </li>
        <li data-icon="ui-icon-wrench">
            <a href="#settings">Settings...