Liste Artikel Text hält die Verpackung unter Symbol

Question

Nur versuchen, ein frustrierendes Problem mit meinen Symbolen zu lösen, die ich in meinen Listenelementen verwende. Wenn der Text in eine andere Zeile umgebrochen wird, wird er immer unter dem Symbol und nicht direkt unter der ersten Textzeile angezeigt. Kann nicht herausfinden, was los ist. Ich habe versucht, eine Höhe zu dem Symbol i Klasse hinzuzufügen, aber es tut das gleiche.

Ich hoffe, Sie könnten helfen können.

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

Ein besserer Weg ist Symbol mit position: absolulte zu legen und einige linken Einzug auf <li> hinzuzufügen.

#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

Keine Notwendigkeit, frustriert sein, es ist eine zweizeilige CSS ist !. bitte unten Linien in den #facts i

display: block; 
float: left; 

so der letzte Block von Code sollte wie folgt aussehen:

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

Hoffnung, das hilft.