Using FontAwesome Icons in Pseudo Elements

For Font Awesome 5 Click Here

With a couple simple CSS rules and some fancy Pseudo Elements you can simply add icons before links all over your website. Any link you can style with CSS Selectors you can add an icon. To use FontAwesome icons on your site check out the setup here.

Final Project Pseudo Elements

The Markup

For this tutorial we're going to add a link icon before any links pointing to All you need is a link.

<a href="">Harner Designs</a>


The Pseudo Elements CSS

Advanced CSS Selection can get pretty sticky, but for this project it's surprisingly easy using pseudo elements (:before, :after). First you set the font-family of the :before element to FontAwesome:

a:before {
    font-family: "FontAwesome";

Then you add the unicode value for the icon you want to add. The unicode value can be found on the individual icon pages on

a[href*=""]:before {
    content: '\f0c1';

An Explanation

Using "a [href*="]" selects any link whose href attribute contains "". For our case this selects any links pointing to a page on our site. If you wanted to flip it you could use the ":not()" css selector to select any link that doesn't point to an internal page. The sky's the limit on this one. For example, you can specify file types if you're linking to a specific file.

See the Pen BLyVBR by Jack Harner (@jackharner) on CodePen.

Let's Chat

  1. Jack Harner says:

    This post still needs to be updated for Font Awesome 5. Stay Tuned!

Leave a Reply

Your email address will not be published. Required fields are marked *

Keep Up With Harner Designs!

Get updates about New Projects, Products, Discounts, and Giveaways from Harner Designs!

By submitting your email, you agree to our Privacy Policy and give us consent to send you marketing and promotional emails. You can unsubscribe at any time.