dsebao
8/1/2018 - 7:39 PM

Ul list with custom bullet (SVG)

ul.list{
    padding-left: 30px;
    li{
        list-style: none;
        font-size: 15px;
        margin-bottom: 20px;
        position: relative;
        &::before{
            left: -30px;
            position: absolute;
            content:"";
            background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18px' height='18px' viewBox='0 0 24 24' fill='none' stroke='#20A249' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check-circle'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>");
            height:16px;
            width:16px;
            display:block;
            top: 4px;
            margin-right: 5px;
            background-position:center;
            background-repeat:no-repeat;
            background-size:100%
        }
    }
}