Styling external links

To add a visual indication to links that are ‘external’ and take you away from my blog, have I added to the right-hand side of the link.

The icon is part Font-Awesome¹ and the following piece of CSS code makes sure it gets added to all of the links that are using the target attribute. 1

/* Styling of external links */
a[target=_blank] {
    margin-right: 1em;
}

a[target=_blank]:after {
    position: absolute;
    font-family: FontAwesome;
    font-size: 0.8em;
    color: rgb(128, 137, 146);
    text-shadow: 1px 1px 1px silver;
    margin-left: 0.2em;
    content:" \F0C1";
    -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
    background-image: none;
}

This requires you to turn on the App ‘External links’ (under General) within the dashboard of your blog. [External links][img]