Best way of including icon alongside text link?

[greencode]

After doing it this way for a very long time I just wanted to make sure that this is the correct way. When I have a text link and then want to include an icon alongside I use this code:

<div class="icon-link"><a href="#">My link</a></div>

and then for the CSS this:

.icon-link {
padding-left: 20px;
}

.icon-link {
background: url(icon.png) no-repeat;
}

Any thoughts?

[alt131]

Hi greencode, what a great question. Not sure there is a "correct" way, but here are some other options:

1. Unless there some other reason for the div, remove it to avoid using an extra element for presentational purposes only, and set the class directly on the link:
   <a class="icon-link" href="#">My link</a>
   
2. If supporting more modern browsers (or accept degraded styling for older ones), avoid the use of a class and use attribute selectors to reduce both css and html and make code maintenance even easier,
   for example:
   <a href="http://www.example.com">My link</a>
   css selector becomes:
   a[href="http://www.example.com"]
   which applies to all links to that site
   
3. For a broader application, try the advanced attribute selectors, for example:
   a[href^="http"], which applies to all external links
   
4. If supporting even more modern browsers maybe pseudo elements, for example
   a:before {content:url(icon.png) /*styles as desired*/}
   which puts the icon before all links, but can be combined with attribute selectors to be more specific, for example
   a[href="http://www.example.com"]:before
   

[edit]for layout[/edit]