This stack overflow listing was helpful.
Using the default WYSIWYG editor to create list items is a common task. By default, it looks like this in Divi:
Clean and simple.
But what if you want to spice up those bullets a bit with, say, a different icon?
- Install Font Awesome
- Pick the icon you want to use
- Edit your child theme style.css file.
- Add something like this:
.entry-content ul { list-style-type: none; } .entry-content ul li { padding-bottom:3px !important; } .entry-content ul li:before { padding-top: 5px !important; font-family: 'FontAwesome'; content: 'f10c'; margin: 10px 5px 0 -15px; position-top:10px; color: #666; font-size:10px; }
Which should display something like this:
Divi using list items and Font Awesome
NOTE – this will replace ALL bullets throughout the entire site with a small circle icon (specifically, FA “icon-circle-blank”)
You can/should, obviously, adjust sizing/color/padding as required.
Build Beautiful.
Native Texas, Logan Seth Ramirez is a computer science graduate from Trinity University and lives in San Antonio with his wife and four children. Along with being a web hero, he authored The Groom Wore White Socks, sings and songwrites as Logan Seth, and his favorite Spanish word is cacahuates.
It does not work. It prints out only “f10c”.
Besides: the plugin linked is not updated for years and therefore not recommended.
Hi, Matthias,
Thank you for the update on the outdated plugin. There are other ways to add Font-Awesome so it’s obviously up to you on using the plugin.
Do you have a link? Might be able to help you troubleshoot.
Should be content: ‘\f10c’;
That’s why only f10c is showing.