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