Indent ragged li when using a custom bullet

Question

I'm trying to indent ragged li lines whilst using a custom bullet point, however any minus 'text-indent' solutions I've found online haven't worked - unless I'm missing something.

Would it be possible for someone to take a look at the code below and tell me what I need to add to indent ragged li lines?

.list-icon-pros {
    list-style: none;
    padding-left: 0;
}
.list-icon-pros li:before {    
    font-family: FontAwesome;
    color: #B3B300;
    padding-right: 10px;
    content: "\f00c";
}

Mantissa

Using this fiddle, please describe more what you are trying to achieve. jsfiddle.net/ZwYyL/2 – Gum

I've added a bullet point long enough to cause the problem I am referring to - jsfiddle.net/ZwYyL/3 – Mantissa

@Mantissa You can position the bullets as absolute to achive the effect: jsfiddle.net/hashem/ZwYyL/4 – Manakin

Answer 1

You could add a negative margin to the pseudo-element or you could use position: absolute.

Position absolute: http://jsfiddle.net/ZwYyL/6/

.list-icon-pros {
    list-style: none;
    padding-left: 20px;
    position: relative;
}
.list-icon-pros li:before {
    font-family: FontAwesome;
    color: #B3B300;
    content:"\f00c";
    position: absolute;
    left: 0;
}

Negative margin: http://jsfiddle.net/ZwYyL/5/

.list-icon-pros {
    list-style: none;
    padding-left: 22px;
}
.list-icon-pros li:before {
    font-family: FontAwesome;
    color: #B3B300;
    content:"\f00c";
    margin:0 5px 0 -22px;
}

Gum