CODEWITHSUNDEEP
htmlcssicons
rufus
rufus

Reputation: 857

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/

#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>

Upvotes: 1

Views: 2053

Answers (2)

negative0
negative0

Reputation: 459

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.

Upvotes: 0

Mohammad Usman
Mohammad Usman

Reputation: 39382

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>

Upvotes: 1

Related Questions