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!
More posts from themightymo.com
How to optimize your Google Crawl Budget using SEM Rush Log File Analyzer and Rank Math SEO
Today I ran the SEM Rush Log File Analyzer tool, and it showed some interesting things that are a complete waste of our Google Crawl Budget. Specifically, I learned that Google is wasting some of our crawl budget on the /wp-includes/ directory, certain plugin directories, and cache directories. I also noticed random files being crawled…
Where is the Google Analytics Measurement ID?
In the vast, evolving world of web development and analytics, keeping up with terminologies and tools can sometimes feel like trying to chase a mischievous cat in a maze. You think you’ve got a grip, only for it to slip right through your fingers! Enter the mysterious “Measurement ID” from Google Analytics 4 (GA4), a…
How to Convert .aiff to .mp3 files via Command Line
Yesterday I ran into an issue where I needed to convert .aiff files to .mp3. DBPowerAmp was recommended to me as a paid GUI tool. But I wanted something more lightweight, since this is a task I rarely need to do (most of the time, I’m already in Logic Pro, and exporting is simple there).…