リストアイテムのテキストは、アイコンの下に折り返して表示されます

Question

私のアイコンのイライラした問題を整理しようとしています。テキストが別の行に折り返されると、テキストの最初の行の真下ではなく、アイコンの下に常に表示されます。カントは何が起こっているのか分かります。アイコンクラスに高さを追加しようとしましたが、同じことをします。

ご希望の場合はお手伝いできますか。

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

良い方法はposition: absolulteにアイコンを配置し、<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

イライラする必要はありません、それは2つのラインのCSSです！私は

display: block; 
float: left; 

ので、コードの最後のブロックは次のようになります。#factsする行の下に追加してください。このことができます

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

希望を。