Create PDF Icon Next to PDF Links Using FontAwesome with CSS In Divi Theme

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:
pdf icons in list of links

Here’s the CSS solution:

ul {
ul.pdf-download-icon li:before {
	content: "\f1c1";
	font-family: FontAwesome;
	color: #393832;


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!

Posted in

Toby Cryns

Toby Cryns is a freelance CTO, expert WordPress developer, and teacher.

He offers free advice to improve your freelance biz.

He also publishes small droppings every now and them to and

Follow Toby's contributions on Github and