Modifying list icons using FontAwesome

I’d like to modify the list icons using FontAwsome. I followed the procedures in this post and added to the Custom CSS tab in the accordions. It does not remove the existing bullets and it prints the code instead of the fa icon.

http://www.mburnette.com/blog/css-only-fontawesome-list-item-bullets

Here is what I added to Custom CSS:

#accordions-44 .accordion-content, .accordion-content li {
  padding: 0;
  margin: 0;
  list-style: none;
}

#accordions-44 .accordion-content li {
  margin: 1em;
  margin-left: 3em;
}

#accordions-44 .accordion-content li:before {
  content: '\f002'; /* fa-search */
  font-family: 'FontAwesome';
  float: left;
  margin-left: -1.5em;
  color: #000000;
}

When I put the same code in my child theme CSS, it renders the fa icon as expected, so I’m pretty sure I’m loading FA correctly. Can you give me an idea as to what I might be missing, or why it does not seem to work inside the accordion?

Do you have a different recommendation?

• This topic was modified 9 years, 7 months ago by AnnasGourmetGoodies.