reduce spacing on one tab on navbar Jquery Mobile

Question

I have a Navbar with three tabs on my header, I also want to add a fourth one for home button. butt only the home icon and no text. With what I currently have it is taking too much space. and it truncates the rest of the tabs on mobile device. how can I resolve this

<div data-role="navbar" data-iconpos="left" class="custom-navbar">
        <ul>
          <li><a href="fb_feed.html" data-prefetch="true" rel="external" data-icon="fbicon"> Facebook</a></li>
          <li><a href="youtube_feed.html" data-prefetch="true" rel="external" data-icon="yticon">YouTube</a></li>
          <li><a href="my_activity.html" id="my_activitypage" data-prefetch="true" data-icon="maicon" class="ui-btn-active ui-state-persist">My Activity</a></li>
          <li><a href="SocialStreamHome.html" data-icon="home" data-iconpos="left">&nbsp;</a></li>
        </ul>
    </div>

This is what it looks like

but I want something like this

I have just cropped it to show that i want a small tab only with the home icon

Answer 1

Working example: http://jsfiddle.net/Gajotres/jCLUm/

CSS :

.custom-navbar li {
    width: 30% !important;
}

.custom-navbar li.last {
    width: 10% !important;
}

.custom-navbar li.last a span .ui-icon {
    left: 25px !important;
}

And there's another present inside.