jQuery Plugin To Add Icons To External Links - External Links

external-links is a simple jQuery plugin that uses regular expression to identify External Links of your page and adds an CSS class to each link. So that you can add a little external link icon following the link text due to them having an CSS class.

See also:

• jQuery Plugin To Open External Links In New Window - ExternalLinking
• jQuery Plugin To Add Target Blank To External links - addTargetBlank

Basic Usage:

1. Load the jQuery library and jQuery external-links plugin at the bottom of your web page to improve the load time.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="external-links.js"></script> 

2. Call the plugin on the links of your page.

<script type="text/javascript">
jQuery('.links').externalLinks();
</script>

3. By default the plugin will add a CSS class of 'external-link' to your External Links. So you can customize the styles in the CSS.

a.external-link {
background-image: url("external-link.png");
background-position: right center;
background-repeat: no-repeat;
padding-right: 20px;
}

4. Advanced usages.

// Select all external links on the page and give them a lovely yellow background color
jQuery('body').externalLinks().css('background-color', 'red');

// Select external links that are children of the element with an id of
// 'foo' and give each a custom class of 'bar'
jQuery('#foo').externalLinks({'class': 'bar'});

// Override the regex used to match URLs that are considered internal
jQuery('body').externalLinks({'re': /jqueryscript\.net/i});

Change log:

2014-03-11

• Fix issue in IE due to use of reserved word 'class'

---

This awesome jQuery plugin is developed by AstunTechnology. For more Advanced Usages, please check the demo page or visit the official website.