Question

我无法弄清楚如何正确设计这个样式。我正在尝试将FontAwesome图标作为列表项目符号样式添加到Wordpress中的特定文本小部件。这是CSS：

.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>

无法弄清楚我错过了什么！

Answer 1

您在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是分配给你想要定位的li的类。

这是一个工作小提琴：https://jsfiddle.net/c2ohp3y2/

Answer 2

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

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

在Wordpress中设置个人列表的样式

2 个答案: