Adding Icon After External Links with CSS or JavaScript

Styling external links with text or icon is common practice for many sites, like Wikipedia. It serves as a simple visual cue indicating that if you click a particular link you will be taken to another site.

You can simply implement this using CSS or JavaScript without having to add any additional elements to your anchor tags or additional image tags to the HTML source.

Example is given below:

CSS Solution

You can archive that with common HTML and CSS like this:

HTML:

<a href="#" class="external">external link</a>

CSS:

.external a {
  background: url(external.jpg) center right no-repeat;
  margin: 0 12px 0 0;
}

Imagine the extra work you have do while passing class="external" to all external links, which is easy enough for you to forget.

However, there's a CSS that can apply the indicator icon to all external links:

a[href^="http://"],
a[href^="https://"] {
background: url(external.jpg) center right no-repeat;
margin: 0 12px 0 0;
}

There are two common urls, like http://www.google.com and https://www.google.com/webmasters. So we have target the two protocols with href^="http://" and href^="https://".

Now, the code above will apply the icon to all links starting with http:// and https:// (including links to your own domain). Luckily there's a way we can play around this. What we have to do is, declare a rule matching links that start with http:// and https:// with the current page domain and set the background and margin values back to the defaults.

If I'm to do that for this blog, I will write something like this:

a[href^="http://www.realcombiz.com"] {
background: "";
margin: 0;
}

The above code will prevent the external icon style on that specific url.

You can also style external link in your web pages with target="_blank" only if that in your visual editor you check that the link should open in new tab. The code that does the magic is as follow:

a[target="_blank"] {
background: url(external.jpg) center right no-repeat;
margin: 0 12px 0 0;
}

Using Font Awesome

If you have Font Awesome installed you can use the following:

a[target="_blank"]:after {
  font-family: 'FontAwesome';
  content: " \f08e";
}

That f08e is called unicode. It is readable by your browser and is ultimately what renders your icon.

Note: If you use an icon font other than Font Awesome, you will need to change the font-family to the name of the font you are using to render your icons.


JavaScript Solution

With JavaScript you can also display icon after external link. The technique is simple: we simply declare a rule that select element with id content, but you will need to make sure the id tally with the id that wraps your content, then we select all the anchor links within the page with getElementsByTagName( 'a' ).

var length = document.getElementById('content').getElementsByTagName('a').length;
var href;
for(var i=0;i&lt;length;i++)
{
 href = document.getElementById('content').getElementsByTagName('a').item(i).getAttribute('href');
 if(!href.match(/your-site.com/))
 {
  document.getElementById('content').getElementsByTagName('a').item(i).innerHTML = document.getElementById('content').getElementsByTagName('a').item(i).innerHTML + "&lt;img src='external.jpg'/&gt;";
 }
}

Now to differentiate external link from internal, we set a rule that check if the current link is external or not. If the link contains the domain name your-site.com then the code in the 'if' block will not be executed. But it finds any link other than your-site.com it will add <img src='external.jpg'/> to its current HTML code.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz