This example uses the arrow icon.

---

/* custom list icon */

ul.arrow_right {
  list-style: none;
  }
  ul.arrow_right li:before {
  color: #BC9D63;
  font-family: "ETmodules" !important;
  content: "\24 \0020";
  }

---

 

You’ll need to find your particular icon code in the list of icons for Divi.

Use the part of the icon code that comes after the “x” and before the semicolon.

In this example of the arrow, the icon code is “$” so the snippet is using “24” for the icon content reference. (The part following adds space between the icon and the list item content.)

Now instead of the plain old <ul>, use this custom list opening tag in your text editor:

---

<ul class="arrow_right">

---

 

Where to paste the CSS snippet

Navigate to Divi>Theme Options and at the bottom of the default “General” tab, paste the CSS snippet into the “Custom CSS” box and save changes.

 

Child Themes

We recommend using a child theme. It is your insurance against losing your custom work in updates.

Click here for instructions on adding a basic Divi child theme with a stylesheet (for custom CSS).

Click here to learn more about child themes and getting the most out of the Divi theme.