| Best way of including icon alongside text link?
|
greencode
msg:4276073 | 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
msg:4276195 | 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:
- 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>
- 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
- For a broader application, try the advanced attribute selectors, for example:
a[href^="http"], which applies to all external links
- 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]
|
|
|
