CODEWITHSUNDEEP
htmlcss
Christy Leigh
Christy Leigh

Reputation: 3

Style Individual Lists in Wordpress

I cannot figure out how to style this correctly. I am trying to add a FontAwesome icon as a list bullet style to a specific text widget in Wordpress. Here is the CSS:

.covenant li {
counter-increment: my-awesome-counter;
margin: 0.25rem;
}

.covenant li:before {
font-family: 'FontAwesome';
content: '\f005';
margin:0 5px 0 -15px;
}

and here is the HTML

<ul>
<li class="covenant">Text</li>
<li class="covenant">Text</li>
<li class="covenant">Text</li>
<li class="covenant">Text</li>
</ul>

Can't figure out what I'm missing!

Upvotes: 0

Views: 31

Answers (2)

grinmax
grinmax

Reputation: 1855

.covenant {
    counter-increment: my-awesome-counter;
    margin: 0.25rem;
}

.covenant:before {
    font-family: 'FontAwesome';
    content: '\f005';
    margin:0 5px 0 -15px;
}

Upvotes: 0

Neelam Khan
Neelam Khan

Reputation: 1121

You are targeting the HTML incorrectly in your CSS, it needs to be:

ul {
  list-style: none;
}

ul li.covenant {
  counter-increment: my-awesome-counter;
  margin: 0.25rem;
}

li.covenant:before {
  font-family: 'FontAwesome';
  content: '\f005';
  margin:0 5px 0 -15px;
}

.covenant is the class assigned to the li that you are trying to target.

Here is a working fiddle: https://jsfiddle.net/c2ohp3y2/

Upvotes: 1

Related Questions