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 {
	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!

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 https://twitter.com/tobycryns and https://twitter.com/themightymo.com

Follow Toby's contributions on Github and WP.org.