We’ve all been there, you want a list of links in your footer and since you’re a nice web designer/developer you want to let visitors know that the link will take them to an external site. Well, FontAwesome
has got your back there! They’ve got at least two icons you can use to denote external links (handily called “external-link” and “external-link-square“).
Now, what you could do is:
<ul>
<li><i class=”fa fa-external-link”><a href=”#”>Link</a></i></li>
<li><i class=”fa fa-external-link”><a href=”#”>Link</a></i></li>
<li><i class=”fa fa-external-link”><a href=”#”>Link</a></i></li>
</ul>
Which is fine, technically. But its a bit messy and very repetitive.
What you could also do, is make a SASS mixin to do all this for you (or use that one in the link).
See the Pen FontAwesome as bullet point by Jane Wilson (@janewilson90) on CodePen.