Add the FontAwesome External Link icon at the end of external URLs

Add the FontAwesome External Link icon at the end of external URLs using only SASS/CSS

by Alexander

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<h1>
Add the
<a href="http://fortawesome.github.io/Font-Awesome/icon/external-link/">FontAwesome External Link icon</a> at the end of external URLs
</h1>

<p>
  Here's a few examples:
</p>

<ul>
<li><a href="//google.com">//google.com</a></li>
<li><a href="http://google.com">http://google.com</a></li>
<li><a href="https://google.com">https://google.com</a></li>
<li><a href="/">/</a></li>
<li><a href="/SomeLocaURL">/SomeLocaURL</a></li>
</ul>

SCSS

body {
  background-color: white;
  font-family: sans-serif;
  font-size: 12px;
}

/* You don't have to define this variable if you've already imported the FontAwesome SASS */
$fa-var-external-link: "\f08e";

/* Add the FontAwesome External Link icon at the end of external URLs */
a[href^="//"]:after,
a[href^="http://"]:after,
a[href^="https://"]:after {
  font-family: 'FontAwesome';
  content: $fa-var-external-link;
  font-size: .75em;
  padding-left: .25em;
  vertical-align: super;
}