Welcome to WebmasterWorld Guest from 107.20.18.131

Forum Moderators: not2easy

Message Too Old, No Replies

Best way of including icon alongside text link?

     

greencode

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

5+ Year Member



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

9:01 pm on Mar 3, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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]
 

Featured Threads

Hot Threads This Week

Hot Threads This Month