如何从png文件中提取图标以列出项目符号点？

Question

我有一个带有图标的png图像文件，可用于列出的项目符号点。图像文件的链接是https://i.imgur.com/9xus2ZJ.png。结果必须看起来完全像这里https://i.imgur.com/kgGNwHv.png上的图像文件。

这是我到目前为止所拥有的：

Index.html

<section class="features container-fluid">
    <div class="row">
        <div class="col-md-12">

            <ul class="features-col">

                <li id="column-left">
                    <img id="samanage-ipad" src="assets/samanage-ipad.png" alt="samanage-ipad">
                </li>

                <li id="column-right">
                    <p id="headline">Closer Look at the Features</p>
                    <p>The Samanage IT Help Desk has amazing features that makes us stand out from the others. <br> We strive to give our customers nothing but the best. Here are a few of them.</p>

                    <ul class="features">
                        <li class="left" id="ticket">Ticket Management</li>
                        <li class="left" id="incident">Incident Management</li>
                        <li class="left" id="problem">Problem & Change</li>
                        <li class="left" id="service">Service Catalog</li>
                        <li class="left" id="self">Self Service Portal</li>
                        <li class="left" id="knowledge">Knowledge Base</li>

                        <li class="right" id="email">Email integration</li>
                        <li class="right" id="auto">Auto-assignment</li>
                        <li class="right" id="sla">SLA</li>
                        <li class="right" id="mobile">Mobile access</li>
                        <li class="right" id="google">Google apps integration</li>
                        <li class="right" id="dashboards">Dashboards & Reports</li>
                    </ul>

                </li>
            </ul>


        </div>
    </div>
</section>

CSS

.features-col {
    color: #000;

}



.features-col li#column-left, .features-col li#column-right {
    display: inline;
}

#column-right {
    position: absolute;
    left: 50%;
    top: 40%;
}

#column-right > p#headline {
    font-family: helvetica;
    font-weight: lighter;
    font-size: 35px;
}

.features li {
    list-style: none;
}

.features li::before {
    content: "";
    width: 15px;
    height: 15px;
    background: url('../assets/icons.png') no-repeat;

}

.features > li.right {
    position: relative;
    left: 50%;
    top: -145px;
}

这对我来说是新事物，以前从未做过。我希望有人指出我如何实现目标的正确方向。谢谢。