How to Add an Icon to Links using CSS

Sometimes it is useful to distinguish between an internal link and an external link, and one way to do that is by placing an icon after the link.

For example, the link to Biztechtonics is an external link.

You can also add icons to links for other purposes, like indicating that a link intiates a download, or displays a PDF file, or allows the user to edit something.

Using Classes

Image

You will need a suitable image, around 14 to 16 pixels, depending on the font size you are using.

There are a variety of icon sets that you can use. We are using many of the icons from the Fugue Icons set.

CSS

You will need to modify and place this code in your CSS file.


.link-external {
    background-position: right center;
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent, transparent), url("http://www.example.com/images/external-small.png");
    padding-right: 17px;
}
  • Be sure to change the URL to the image you want to use.
  • You may need to adjust the padding-right value slightly to align the image with the text.
  • We used class link-external in our example, but you can change that if desired.

HTML

The code:
<a class="link-external" href="http://example.com/" target="_blank">Example</a>

Would display:

Example

About the Author

WisTex's picture
Scott M. Stolz

Recommended Content