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.