I have an ul which is being rendered dynamically through syncfusion. The rendered html is below:

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

I want to have the below icon, instead of a bullet in the list.

icon-delete

Any idea how I can do this using css? Thanks

1 Answers

0
Naveen On

You can try this solution

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>

##