List item text keeps wrapping under icon

Question

Just trying to sort out a frustrating issue with my icons i am using inside my list items. When the text wraps onto another line it always goes under the icon instead of directly underneath the first line of text. Cant work out whats going on. I have tried adding a height to the icon i class but it does the same thing.

Hope you might be able to assist.

https://jsfiddle.net/rufusbear/40wr9ngt/

 #facts { padding: 0; margin: 1% 0 0 0; list-style: none; } #facts li { margin: 2% 17%; } #facts i { margin-right: 2%; font-size: 130%; } @font-face { font-family: "Flaticon"; src: url("./Flaticon.eot"); src: url("./Flaticon.eot?#iefix") format("embedded-opentype"), url("./Flaticon.woff") format("woff"), url("./Flaticon.ttf") format("truetype"), url("./Flaticon.svg#Flaticon") format("svg"); font-weight: normal; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio: 0) { @font-face { font-family: "Flaticon"; src: url("./Flaticon.svg#Flaticon") format("svg"); } } [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after { font-family: Flaticon; .font-size: 20px; font-style: normal; .margin-left: 20px; } .flaticon-apple:before { content: "\\f100"; } .flaticon-biscuit:before { content: "\\f101"; } .flaticon-coffee-cup:before { content: "\\f102"; } .flaticon-film:before { content: "\\f103"; } .flaticon-gamepad:before { content: "\\f104"; } .flaticon-lawn-mower:before { content: "\\f105"; }

 <ul id="facts"> <li> <i class="flaticon-coffee-cup"></i> random text random text random text random text random text </li> </ul>

Answer 1

A better way is to place icon with position: absolulte and add some left indent on <li> .

 #facts { padding: 0; margin: 1% 0 0 0; list-style: none; } #facts li { position: relative; padding-left: 25px; margin: 2% 17%; } #facts i { position: absolute; font-size: 130%; left: 0; top: 0; } @font-face { font-family: "Flaticon"; src: url("./Flaticon.eot"); src: url("./Flaticon.eot?#iefix") format("embedded-opentype"), url("./Flaticon.woff") format("woff"), url("./Flaticon.ttf") format("truetype"), url("./Flaticon.svg#Flaticon") format("svg"); font-weight: normal; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: "Flaticon"; src: url("./Flaticon.svg#Flaticon") format("svg"); } } [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after { font-family: Flaticon; .font-size: 20px; font-style: normal; .margin-left: 20px; } .flaticon-apple:before { content: "\\f100"; } .flaticon-biscuit:before { content: "\\f101"; } .flaticon-coffee-cup:before { content: "\\f102"; } .flaticon-film:before { content: "\\f103"; } .flaticon-gamepad:before { content: "\\f104"; } .flaticon-lawn-mower:before { content: "\\f105"; }

 <ul id="facts"> <li><i class="flaticon-coffee-cup"></i>random text random text random text random text random text</li> <li><i class="flaticon-coffee-cup"></i>random text random text random text random text random text</li> </ul>

Answer 2

No need to be frustrated, it's a two line css!. please add below lines to #facts i

display: block;
float: left;

so the final block of code should look like this:

#facts i {
    margin-right: 2%;
    font-size: 130%;
    display: block;
    float: left;
}

Hope this helps.