rufus rufus - 2 months ago 20
CSS Question

List item text keeps wrapping under icon

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/

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


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

Answer

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>