Icon for external links

Small details in your website design make a big difference for its visitors.

Take care of such details, and your visitors will pay you back with their trust and repeat visits.

One of such important details is the little icon you may have seen placed in some sites, like BBC, before or after a weblink to an external site.

In this tutorial, you will learn how to manually add such helpful icon to external links in your Joomla articles.

What Icon Are We Talking About?

For best illustration, I picked up the bbc.co.uk website. Please, take a look at a couple of screenshots from their site with the external link icon.

On this screenshot, you will see the icon placed after the link to an external site:

Example of an icon for an external link on bbc site

On this one, the icon is placed before the external link:

One more example from the bbc site

As you can see, this little icon actually plays a role of a small and unobtrusive mini call-to-action.

It gently encourages a visitor to click on the link and at the same time tells them that it will lead them out of the site.

This icon looks pretty sexy but the main thing is it enhances the site's external links and improves the visitor's navigational experience.

The visitors will pay back with their trust and repeat visits.

How Do I Add This Icon?

When you need a solution for your Joomla site, chances are there is already an extension written to resolve it.

NS Font Awesome Joomla plug-in enables you to add to your site scalable icons from Google's Font Awesome.

ns font awesome joomla plugin

The particular icon you will be adding from the Font Awesome 4 to your site in a second is the External Link:

font awesome external link

Step #1. Install NS Font Awesome Joomla Plugin

  • Go to the NS Font Awesome download page at nswd.co website.
  • Download the free version of the plugin.
  • Go to Extensions > Manage and install the NS Font Awesome plugin.

Everything being well, you should see the Installation of the plugin was successful message:

ns font awesome installation successful

  • By default, NS Font Awesome plugin is disabled. Go to Extensions > Plugins and make sure the NS Font Awesome plugin is enabled:

Enable ns font awesome plugin

Good job! One extension is done. Let's move to the second one.

Step #2. Install RokCandy

The NS Font Awesome plug-in works best in combination with the RokCandy component. 

This component will allow you to create the snippet of the External Link icon code. You then will be able to add this snippet directly to the text of your Joomla articles or modules.

RokCandy component download page

  • Install this component as you would any other Joomla extension:

RokCandy installed

Excellent! You just installed two required Joomla extensions. 

They will enable you to add the Font Awesome's External link icon to external links in your Joomla articles and modules at will.

Next, let's get the icon's code that you will need in a minute for RokCandy.

Step #3. Take the External Link Icon Code

The External Link icon code

Good job! In the next step, you will add this code to RokCandy's Macros.

Step #4. Create a RokCandy Macro with the Icon's Code

You need to create a RokCandy macro syntax or, in short, macro for the Font Awesome External Link icon to get displayed.

Without it, Joomla simply will strip its code off and it will not be displayed.

  • Go to Components > RokCandy > Macros:

Go to components then rokcandy then macros

  • You will see the RokCandy Manager: Macro page. Click New:

Click New

  1. Inside the Macro box, enter the code on the image below
  2. Inside the HTML box, paste the code that you copied from the Font Awesome/External Link page:

Macro created

Good job! You are now ready to add the Google Font Awesome External Link icon inside your Joomla content. 

Step #5. Add Google Font Awesome External Link to a Joomla Article

Open up a Joomla article. For the purpose of this tutorial, I will open the Beginners sample article.

  1. Place your mouse cursor before or after the selected link to an external site
  2. Click the RokCandy Macros editor button:

Select link then click rokcandy macros

  • You will see the RokCandy Macros modal box. Click on your icon's macro:

Click on your macro

You should see the icon's macro added in the link:

The icons macro added

  • Click Save or Save & Close.

There you have it. If you now check your article from the frontend, you will see the Google Font Awesome External Link icon nicely placed in your external link:

The External Link icon from the frontend

What's Next?

Join our Joomlashack Everything Club now. Become a member and find everything you need to build great Joomla websites:

  • 22 powerful extensions
  • 20 beautiful templates
  • 500+ easy to follow training videos
  • 2 best-selling Joomla books.

About the author

Born from a Ukrainian mother and Russian father, Alex lives in the United Kingdom. Alex is a self-taught Microsoft Certified Professional. He enjoys learning Joomla and helping web site administrators make the most of it.