Question

I want to create header for my website widgets.
The header is like below image :


I wrote this code now :

.Widget-Header
{

    background-color: #f7901e;
    height: 40px;
    font-family: Sansation;
    font-weight: bold;
    font-size: 21px;

}

Now I don’t know how to style header icon and title.

SHould I consider separate tag for header text and Icon ?

How do I do for header Icons ? Would you please give an example ?

Update

I want to use this header class for some header containers with diffrent Icons.
So How do I do now ?

Answer 1

You could do it all with CSS and a background image. That way, the markup is clean (presentation and structure is separated) users who disable CSS will not need to download the image and still retain a functional anchor.

Updated Demo – using a single style for the majority of the properties and defining one extra rule for each icon as a background-image property.

Updated Demo 2 since the elements should be headings, so have made them <h2> and moved the anchor to the right side, matching the original question.

HTML

<h2 class="first">Stop Clock<a href="#">+</a></h2>
<h2 class="second">Something else<a href="#">+</a></h2>

CSS

h2 {
    background: #f7901e no-repeat;
    height: 40px;
    font-family: Sansation;
    font-weight: bold;
    font-size: 21px;
    width:400px;
    margin-bottom:5px;
    padding-left:50px;
    line-height:2;
    position:relative;
}

.first {
    background-image:url(http://lorempixum.com/40/40/city/1)
}

.second {
    background-image:url(http://lorempixum.com/40/40/city/2)
}

h2 a {
    position:absolute;
    right:10px;
    top:15px;
    background:url(http://lorempixum.com/10/10) no-repeat;
    text-decoration:none;
    width:10px;
    display:inline-block;
    vertical-align:middle;
    text-indent:1000px;
    font-size:10px;
    line-height:1;
}