Add Font Awesome icon after all External Links Automatically

Add Font Awesome icon after all External Links Automatically

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.
Add Font Awesome icon after all External Links Automatically
4 Stars stars - "Add Font Awesome icon after all External Links Automatically" This tutorial is for beautifying your Blog post's external links. We often use external l...

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

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

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 Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

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 *