Add Font Awesome icon after all External Links Automatically

Add Font Awesome icon after all External Links Automatically
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.
Go Up