Home
Last updated
To apply an icon to links in CSS you use background-image. Although you should use icons on links sparingly icons can greatly improve the usability of a site. In this example we have a link that goes to a journal entry page. Make an icon using Illustrator, Photoshop or your favorite imaging software. Make sure that it relates well to the size of the text it appears next to. Here I’ve made a simple pencil:
In this example we have a simple link within a div
<div id="example-link">
<a href="#">Link to journal article</a>
</div>
#example-link a {
padding-left: 15px;
background: url(/images/examples/bglinks/pencil_icon.gif) 3px 1px no-repeat;
}
Padding left - This moves the text away from the image. Depending on the width of your image you will need more or less padding
Background - This has the rules associated with the the background image
A simple icon applied to a link using CSS. (If you are reading this in a newsreader you won’t see the image)
Have an update or suggestion for this article? You can edit it here and send me a pull request.