homepage Welcome to WebmasterWorld Guest from 54.237.38.30
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Best way of including icon alongside text link?
greencode

5+ Year Member



 
Msg#: 4276071 posted 6:58 pm on Mar 3, 2011 (gmt 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?

 

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4276071 posted 9:01 pm on Mar 3, 2011 (gmt 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:
    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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved