Prevent text in list from wrapping under icon bullet?

Question

I've built and styled lists before, but this list is made from a Font Awesome font and it's made with a div (it's not global).

I started off this this:

ul.fa-ul2 li:before {
    font-family: FontAwesome;
    content: '\f058';
    color: #6190C3;
    font-size: 28px;
    padding-right: 10px;
    margin-left: -15px;
}

No matter what I have tried, can't get text to stop wrapping under bullet. Also need to get list elements up a little so they line up with font. Here is a link to test site: link to live test site

I've tried "display: inline-block" and "list-style-position: outside" with no luck. I might have had them in the wrong place. Thanks for any suggestions.

Answer 1

add this styles set position:absolute to li:before and li position:relative

ul.fa-ul2 > li{
 position: relative;
}

ul.fa-ul2 li:before {
 position: absolute;
 left: -13px;
}