Today I needed to add a little “pdf” graphic before each link in a list of linked pdf files.

I turned to FontAwesome for the graphic, but getting it to display using CSS isn’t straightforward.

In fact, I couldn’t find documentation on the FontAwesome website sharing how to even do it!

Here’s what it looks like to our website visitors:

Here’s the CSS solution:

ul {
	position:relative;
}
ul.pdf-download-icon li:before {
	content: "\f1c1";
	font-family: FontAwesome;
	left:-15px;
	position:absolute;
	top:0;
	color: #393832;
}

Enjoy!

Additional documentation about adding FontAwesome to Divi Theme.

By the way, Divi has itsĀ own beautiful icon fonts built in, out-of-the-box, as well!