Friday, August 21, 2020

Add Font Awesome icon after all External Links Automatically

Add Font Awesome icon after all External Links Automatically 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. Step 1Log in to your Blogger Account and Go to yourBlogger Dashboard Step 2Click on Now click on-Template-Edit HTML- Step 3Now find theheadby pressing Ctrl+F (Windows) or CMD+F (Mac) Step 4Copy the script from below and Paste it below/afterhead 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 5Now again find the/headby pressing Ctrl+F (Windows) or CMD+F (Mac) Step 6Copy the script from below and Paste it above/before/head b:if cond='data:blog.pageType == quot;itemquot;' 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: /*]]*/ /style /b:if Customization You can change the External Link Icon by altering Font Awesome icon code f14c. You can use our FontFont Awesome Cheatsheetto get more icon's code. Step 7hit theSavetemplatebutton. Now check your Blogger Blog post's and see any external link that an icon has appeared after the link.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.