Home
Blogger

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.

6 comments

  1. সত্যিই অসাধারণ একটা জিনিস শেয়ার করলেন রাব্বি ভাইয়া
    • Thanks Habib..But kico template a problem kore. Karon all external link a icon show korbe. :as
  2. 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'/>
  3. 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.
Go Up