Sure, going through and adding an tag to all your hyperlinks would work, but that’s just tedious.
CSS offers a far easier solution. Here’s a quick, three step guide that will give you funky links in no time.
- Create the icon you want to use. Think about the size, it should be a similar height to the default text size of your site.
- Add the following line of code to your CSS.
a {
background-image: url(IMAGE_URL);
background-position: right;
background-repeat: no-repeat;
padding-right: 10px; }background-image: url(IMAGE_URL);
It will tell the browser where the icon image is located. Replace IMAGE_URL with the location of your image.
background-position: right;
In these links, the icon will appear to the right of the text. You can change this to left if you want it at the beginning.
background-repeat: no-repeat;
We only want the icon to show once. So turn off repeating.
padding-right: 10px;
This part gives all your hyperlinks some extra space at the end for the icon to sit. (You’‘ll probably want to tweak this value depending on your icon size.) You can change this to ‘’padding-left’’ for icons at the front of links.
- Hey presto, check those links again – easy huh? You can also extend this a little, try changing the icon for the :hover event, you can come up with some simple but stylish looking effects.
6 responses so far ↓
Benny T // December 7, 2004 at 12:27 pm
Simple, yet briliant. The a:hover idea works like a charm.
Patrick Fitzgerald // December 20, 2004 at 9:54 pm
In the wikipedia stylesheet they use something like the following:
a[href ^="http://"] {That will add the image only to links that start with http: (which on their site is used only for external links).
They use similar rules to give diffent icons for mailto:, https:, etc.
Stefan Isarie // February 9, 2005 at 6:53 pm
Patrick the problem with this kind of selectors
a[href ^="http://"] {is that they are not recongnized by MS IE.
I will add a few more selectors of this kind, on topic:
a[href^="mailto"] {background: transparent url(images/envelope.gif) center left; padding-left:16px;}^ style only the links starting with mailto (a href=”mailto:me@internet.com”, for example).
a[target^="_blank"] {background: transparent url(images/topArrow.gif) center right;padding-right:16px;}^ Adds an arrow on the right of the link suggeting that you will leave the current website by clicking on that link
Stefan
PS. Hmm… Why can’t I preview my post before replying?
Andy Peatling // February 9, 2005 at 10:39 pm
Hmm previewing, why didn’t I notice that?
I’ll get on it, maybe I turned it off in WordPress…
Update: Comment previewing is now possible.
bingo // March 6, 2006 at 3:33 am
I am trying to start my own blog and I’m trying to learn how this works.
My site looks like this bingo
http://bingoplaying.com
Jürgen // March 17, 2007 at 3:56 pm
Great Post. Very helpfull informations. Thanks a lot. Jürgen from Germany.