Do not wrap text under icon list group

Question

With this code, the text wraps under the icon. How can I make it so the text doesn't wrap under the icon while keeping the alignment together?

Thanks in advance!

.list-group-item {
  width: 100%;
  text-align: left;
  background-color: #ffffff;
  border-color: #ffffff;
  color: #333;
  padding-left: 0;
}

.fa-check-circle {
  font-size: larger;
  color: black;
  vertical-align: middle;
  padding-right: 5px;
}

<ul class="list-group">
  <li class="list-group-item"><i class="far fa-check-circle"></i><span class="features">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</span></li>
</ul>

Answer 1

I would prefer this simple solution

li {
  margin-left: 0rem;
  text-indent: -0rem;
}

<ul>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi dignissimos dolore corporis, veritatis quos ipsam a
    non libero iusto doloremque</li>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius quo voluptatum assumenda. Ea totam sunt nesciunt
    architecto sed modi possimus ipsum!</li>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et similique impedit dignissimos esse asperiores</li>
</ul>

Note: Just play around with changing the values of margin-left and text-indent but be sure to have a same value for both of them. Negative value for text-indent and positive for margin-left. If you have no global styles for this, definitely you will get your desired result with this simple css.

Answer 2

I know it's late, but still...

Here's an elegant solution using css grids.

Instead of using <ul><li> declare a set of divs inside a wrapping div which defines a css grid. The wrapper div declares the icon to be used. All you need is an empty <div> element before each list element. In my example I use IcoFont but it will work with any icon.

/* Icofont Icons */
@font-face{
  font-family: "IcoFont";
  font-weight: normal;
  font-style: "Regular";
  src: local("IcofontIcons"),
    url("https://benshomer.com/static/css/fonts/icofont_ben.woff2") format("woff2");
}

[class^="icofont-"], [class*=" icofont-"]
{
  font-family: 'IcoFont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  line-height: 1;
}

.iconlist{
  display: grid;
  column-gap: 2%;
  row-gap: 20px;
  grid-template-columns: 4% 95%;
  padding: 10px;
}
.iconlist.tick-mark > div:nth-child(odd)::before {
    font-family: IcoFont;
    padding-right: 10px;
    content: "\f00e";
}

<link rel="stylesheet" type="text/css" media="all"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

    <div class="iconlist tick-mark">
       <div></div>
       <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    <div></div>
       <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    <div></div>
       <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    <div></div>
       <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    </div>

The engine is here... Of course, you may also use the "even" selector to control the appearance of the list elements.

.iconlist{
  display: grid;
  column-gap: 2%;
  row-gap: 20px;
  grid-template-columns: 4% 95%;
  padding: 10px;
}

.iconlist.stylish-right > div:nth-child(odd)::before {
    font-family: IcoFont;
    padding-right: 10px;
    content: "\eac0";
}

Answer 3

There are several ways to achive this - but the simplest is to remove the margins and padding on the ul, apply list-style:none to remove the native browser bulletfor the li's.

Then apply padding-left to the li to move it as a block and give it space on the left for the icon to sit into. Be sure to make it position: relative, since the icon will be positioned absolutely in relation to the li.

Then the icon can be made position: absolute and left: 0 in order to sit into the space in the li made by the left padding.

EDIT: There is a built in version of this via Font-Awesome which you can directly use to replace the bullets in the ul - refer to the bottom example. Only styling required is to space out the li's - but the icon in place of the bullet is handled by the FA styling.

.list-group {
 margin-left: 0;
 padding-left: 0;
 list-style: none;
}

.list-group-item {
  width: 100%;
  background-color: #ffffff;
  border-color: #ffffff;
  color: #333;
  padding-left: 32px;
  position: relative;
  margin-bottom: 12px
}

.fa-check-circle {
  font-size: larger;
  color: black;
  vertical-align: middle;
  position: absolute;
  left: 0
}

.fa-ul li {
margin-bottom: 12px;}

<link rel="stylesheet" type="text/css" media="all"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

<b>Standard method - using spacing and position: absolute to position the icons.</b>
<ul class="list-group">
  <li class="list-group-item">
    <i class="far fa-check-circle"></i><span class="features">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</span>
  </li>
    <li class="list-group-item">
    <i class="far fa-check-circle"></i><span class="features">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</span>
  </li>
    <li class="list-group-item">
    <i class="far fa-check-circle"></i><span class="features">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</span>
  </li>
</ul>

<hr/>
<b>Native Font-aesome method - replacing the bulets with icons</b>
<ul class="fa-ul">
  <li><span class="fa-li"><i class="far fa-check-circle"></i></span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</li>
  <li><span class="fa-li"><i class="far fa-check-circle"></i></span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</li>
    <li><span class="fa-li"><i class="far fa-check-circle"></i></span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</li>
</ul>