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

Jack Harner

Jack Harner

Web Designer, Photographer, Graphic Designer, Marketer, Entrepreneur.

Pretty Much A Jack Of All Trades

Why Not Get The Discussion Started?

  1. Jack Harner 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 *

Let's Get Started

Answer a few quick questions about your project and we will get back to you as soon as possible!