Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Best way of including icon alongside text link?

6:58 pm on Mar 3, 2011 (gmt 0)

Junior Member

5+ Year Member Top Contributors Of The Month

joined:July 4, 2007
posts: 193
votes: 0

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?
9:01 pm on Mar 3, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0

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:
    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

[edit]for layout[/edit]

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members