Indicating external links

Often, it's helpful to inform users when a link takes them away from your site. Typically this is accomplished by using a small inline icon directly after the link. Although there are several styling techniques that allow you to do this, it's ideal to use a technique that allows the icon to scale along with the text.

Icon fonts are an ideal solution, as they are sized by the same properties as the text they accompany. The downside to using icon fonts is they have accessibility issues, as non-informative text is added to the link.

In this example I'm using Modern Pictograms, by John Caserta. I'm using an attribute selector to filter external links and generated content to insert the appropriate icon.

You can find Modern Pictograms and other icon fonts at Font Squirrel.

For comparisons sake, this is an internal link.

This technique also works well when targeting external resources.