使用CSS将li的项目符号更改为图标

时间:2019-04-29 11:30:23

标签: html css html-lists syncfusion

我有一个ul,它是通过syncfusion动态呈现的。 呈现的html如下:

<ul id="listCa" class="e-listbox e-js e-ul" data-ej-unselectable="on" style="user-select: none; cursor: pointer;" aria-expanded="true">
    <li style="" value="8" class="e-draggable e-droppable e-js">Loading of your furniture and personal effects in an air container</li>
    <li style="" value="6" class="e-draggable e-droppable e-js">Packing and wrapping of all items by trained and experienced AGS packing crew</li>
</ul>

我想要下面的图标,而不是列表中的项目符号。

  

图标删除

有人知道我如何使用CSS做到这一点吗? 谢谢

1 个答案:

答案 0 :(得分:0)

您可以尝试此解决方案

ul { padding-left:20px; list-style:none; }
li { margin-bottom:10px; }
li:before {    
    font-family: 'FontAwesome';
    content: '\f067';
    margin:0 5px 0 -15px;
}
<ul>
    <li>Lorem ipsum deserunt consequat fugiat tempor. Lorem ipsum deserunt consequat fugiat tempor. Lorem ipor. Lorem ipsum deserunt consequat fugiat tempor. Lorem ipsum deserunt consequat fugiat tempor. Lorem ipsum deserunt consequat fugiat tempor. Lorem ipsum deserunt consequat fugiat tempor.</li>
    <li>List Item</li>
    <li>List Item</li>
</ul>

##