612-293-8629 [email protected]

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!

PHONE, EMAIL, TEXT

We love to communicate: phone, email, text, Facebook, Twitter, LinkedIn, you name it.

LOCATIONS

PAYMENTS ACCEPTED

Call Now

Enroll in Our Free Beginner WordPress Class by Email

Never feel powerless in WordPress again!  Become a WordPress superstar for free in only minutes a day!

Our Beginner WordPress Email Class is delivered to your inbox!

Learn More 

You Have Successfully Enrolled! Prepare For Amazing!