FontAwesome icons as bullet points

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.0

So as you can see, you pass the mixin the variables of $icon, $width, and $color.

  • $icon is the unicode value of the icon you want with the \ being needed for the content: element of the CSS (in “”, that’s important).
  • $width is just the width you want to use, and it also gets used for padding-left on the li element and a negative margin-left on the icon.
  • $color is just the colour you want the link to be inside your list.

Remember when you’re doing this to include the FontAwesome CSS in your project.