Bootstrap toggable tab image

Question

I am coding an HTML page that is using the Togglable tabs that is shown here at this link: http://getbootstrap.com/javascript/#tabs

I need to display an image as part of the Notifications tab text, to the left of the text "Notifications".

Here is my code:

<div class="bs-example bs-example-tabs">
    <ul id="myTab" class="nav nav-tabs">
        <li class="active"><a href="#Notifications" style="color:#003300;font-size:25px;background-image:url('HomeIcon.png');display:block;" data-toggle="tab">Notifications</a></li>
        <li><a href="#QC" style="color:#003300;font-size:25px" data-toggle="tab">QC</a></li>
        <li><a href="#MySavedWork" style="color:#003300;font-size:25px" data-toggle="tab">My saved work</a></li>
        <li><a href="#MyLinks" style="color:#003300;font-size:25px" data-toggle="tab">My links</a></li>       
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="Notifications">
    </div>
</div>

Currently, the image is shown, however, rather than one image being displayed, the image is replicated multiple times.

Can I please have some help to display one instance of my image, to the left of the text?

Thanks in advance

Answer 1

How about using CSS property: background:url('HomeIcon.png') no-repeat; so this img will be presented only once?

Also you can add a position where this image (background) will be placed (background:url('HomeIcon.png') no-repeat left;, background:url('HomeIcon.png') no-repeat right; etc.).