Add Font Awesome icon after all External Links Automatically

Add Font Awesome icon after all External Links Automatically

Comments: 6
data:blog.title
blogger tricks

This tutorial is for beautifying your Blog post's external links. We often use external link for reference or sometimes for showing demo and download.  So by adding a beautiful icon we can make our external links beautiful. And visitors also easily able to understand the external link by viewing the icon.

Latest trend is to use Font Awesome based icon in Blogger template so we will use Font Awesome icon for denote external link inside Blog posts. This width will be helpful for those who have huge external link on their Blog site and now wants to beautify the external links by adding widget. Because by adding the code we will able to display external link icon after all external links inside Blog posts. You can see the below image an External link with Font Awesome Icon.

external link with font awesome icons


Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML->

Step 3
 Now find the <head> by pressing Ctrl+F (Windows) or CMD+F (Mac)  

Step 4 Copy the script from below and Paste it below/after <head> 


<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>


If your Blogger template already have Font Awesome Icon then skip the step 4.

Step 5 Now again find the </head> by pressing Ctrl+F (Windows) or CMD+F (Mac) 

Step 6 Copy the script from below and Paste it above/before </head> 


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.post-body a{font-weight:700;position:relative;padding-right:20px;display:inline-block;}
.post-body a:before{content:'\f14c ';font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;color:#333;position:absolute;bottom:0;right:0;font-size:14px;}
/*]]>*/
</style>
</b:if>

Customization

  • You can change the External Link Icon by altering Font Awesome icon code \f14c. You can use our Font  to get more icon's code.
Step 7 hit the Save template button.

Now check your Blogger Blog post's and see any external link that an icon has appeared after the link.

Speak Your Mind

সত্যিই অসাধারণ একটা জিনিস শেয়ার করলেন রাব্বি ভাইয়া

Thanks Habib..But kico template a problem kore. Karon all external link a icon show korbe. :as

not work ?

Have you added the below code. Because without Font Awesome icon won't be visible.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Anonymous 8/17/2016

It shows on every link, both external and internal. How do I make it appear on only external links.

Hi There
It must work only on external URL. but if your Internal Blog URL already set open in new tab then it will display with internal link also.

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *