 |
| Font Awesome logo belongs to FontAwesome.io |
CSS 06: LINK ANCHOR
This tutorial will make every single your external link [URI] on your site would be have anchor icons. The anchor should be visible inside posting area or an article area only.You can see an example icon like this: www.external-link.com .
AUTO ICONS ON EVERY LINKS:
Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.Put CSS script before </head>
CSS
<b:if cond='data:blog.pageType == "item"'>NOTE: Change www.yoursite.com to your site's url!
<style type='text/css'>
/*<![CDATA[*/
.post-body a[href^="http://"],.post-body a[href^="https://"]{padding-right:21px;display:inline-block;color:#29ABE2}
.post-body a[href^="http://"]:before,.post-body a[href^="https://"]:before{content:'\f08e';font-family:FontAwesome;color:#29ABE2;position:absolute;bottom:0;right:0;}
.post-body a[href^="http://www.yoursite.com/"]:before,.post-body .separator a:before{content:'';}
.post-body a[href^="http://www.yoursite.com/"],.post-body .separator a{padding-right:0!important}
.post-body a{position:relative;font-weight:bold;color:#29ABE2}
.post-body .separator a{margin:0!important}
/*]]>*/
</style>
</b:if>
LINK ANCHOR FEATURES
1. Make an auto icon called link anchor on links inside the article's post.2. Images doesn't have an anchor link.
3. Auto anchor icon on every external link / outbound link.
4. Internal link doesn't have an anchor link.
Do not forget you need Font Awesome's stylesheet loaded into your script or it won't works.
See on Font Awesome's tutorial.