header css,Style header CSS

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

and moved the anchor to the right side, matching the original question.

HTML

Stop Clock+

Something else+

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;

}