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:
On this one, the icon is placed before the external link:
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.
The particular icon you will be adding from the Font Awesome 4 to your site in a second is the 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:
- By default, NS Font Awesome plugin is disabled. Go to Extensions > Plugins and make sure the NS Font Awesome plugin is enabled:
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.
- Go to the RokCandy download page and download the component:
- Install this component as you would any other Joomla extension:
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
- Go to the External Link icon page.
- Scroll down the page and copy the icon's 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:
- You will see the RokCandy Manager: Macro page. Click New:
- Inside the Macro box, enter the code on the image below
- Inside the HTML box, paste the code that you copied from the Font Awesome/External Link page:
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.
- Place your mouse cursor before or after the selected link to an external site
- Click the RokCandy Macros editor button:
- You will see the RokCandy Macros modal box. Click on your icon's macro:
You should see the icon's macro added in the link:
- 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:
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.