Выравнивание пунктов списка с добавленным элементом

[AndrewLite]

День добрый! Набиваю руку в простенькой верстке придуманного мной сайта. Возникла проблема из за которой рву на себе волосы уже 2е сутки - это выравнивание пункта текста с добавленной картинкой вместо привычных точек. Перепробовал уже все,с list-style-image вообще сделать что либо бесполезно. Перешел на изменения в самом <li>, текст просто накладывается на картинку и сделать ничего не получается. Размер картинки 64x64. Поиски в интернете успехом не увенчались. 

Ниже мой сырой код по этому вопросу:

li {
list-style-type: none;

}
li:before{
content: url("http://s1.iconbird.com/ico/2013/9/447/w128h12813804433922.png");
width: 30px;
height: 30px;
display: grid;
margin-top: 2%;
}

Должно получится как на картинке:

 

[klierik]

Здравствуйте.

В качестве примера могу предложить такой вариант:

[AndrewLite]

Почему то не отображает саму картинку, остаются точки, так как list-style-type: none; пришлось удалить. Я на самом деле вообще не могу понять почему не получается, т.к. у вас очень доступный пример, но отображения нету у меня.

[klierik]

Не могу знать почему у Вас не так. попробуйте воспроизвести Ваш пример на jsfiddle

[ShumNo]

12 часов назад, AndrewLite сказал:

Почему то не отображает саму картинку, остаются точки, так как list-style-type: none; пришлось удалить. Я на самом деле вообще не могу понять почему не получается, т.к. у вас очень доступный пример, но отображения нету у меня.

смотрите может стили наследуются