Do not wrap text under icon list group - html

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

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>