スタイルWordpressの個々のリスト

Question

これを正しくスタイルする方法がわかりません。私はWordpressの特定のテキストウィジェットにリストの箇条書きのスタイルとしてFontAwesomeアイコンを追加しようとしています。

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

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

、ここでHTML

ある

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

私が欠けているかを把握することはできません：ここにCSSです！

Answer 1

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

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

Answer 2

あなたのCSSで正しくHTMLをターゲットにしている、それはする必要があります：

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あなたがターゲットにしようとしている李に割り当てられたクラスです。ここで

は作業フィドルです：https://jsfiddle.net/c2ohp3y2/