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;
}

Answer 2

Just add position relative to li:before and move it using negative top and left

ul.fa-ul2 li:before {
  position: relative;
  top: -20px;
}

Answer 3

I think I got it to show the way you wanted

Fiddle: http://jsfiddle.net/a5w5pvr1/1/

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

li {
    list-style-type: none;
    display: block;
    margin-left: 1em;
    margin-top: 0.5em;
}

Answer 4

Add this code for taking list element upside

ul.fa-ul2 li:before{
top: 5px;
}