Using FontAwesome Icons in Pseudo Elements

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 set 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 HarnerDesigns.com. All you need is a link.

<a href="http://harnerdesigns.com">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 FontAwesome.io

a[href*="harnerdesigns.com"]:before {
	content: '\f0c1';
}

An Explanation

Using "a [href*="harnerdesigns.com]" selects any link whose href attribute contains "harnerdesigns.com". 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.

/*--- Fancy Box --- */