Bootstrap list-group-item display

Question

I have a list of links displayed with Bootstraps list-group classes. I am trying to add a font-awesome icon to one of the links. I have the jquery code that will change the icon when it is clicked on. The problem is that if I add a span to the link to hold the icon, the icon is shown on the next line. I've found that that is due to the display:block line. If I remove that, the icon is shown on the same line as the link but the overall format of the links lose the appearance of the list-group. Here is my jsfiddle. You can see the first div with the stock class shows the icon on the next line, while the one with my class shows it on one line.

I don't know how to use jsfiddle to show the actual appearance of the links but I hope that doesn't affect the answer. Is there a way to get this to work or should I change the icon code to use onclick with a javascript function?

    <style>
    .my-list-group-item {
     position: relative;
     /*display: block;*/
     padding: 0px 15px; /* adjust here */
     margin-bottom: -1px;
     border: 1px solid #ddd;
     line-height: 1em /* set to text height */
    }
    </style>

    <div class="list-group list-group-flush">
    <div>
    <a class="list-group-item list-group-item-action" href="example.com">Link 1</a>
    <span class="more far fa-thumbs-down" id="parent-1"></span>
    </div>

    <div>
    <a class="my-list-group-item-action" href="example.com">Link 1</a>
    <span class="more far fa-thumbs-down" id="parent-2"></span>
    </div>
    </div>

    <script>
    $(".more").click(function() {  

     var id = this.id;
     $("#"+id).toggleClass('fa-thumbs-up fa-thumbs-down'); 
    });
    </script>

Answer 1

everything in your code is ok , it's all about design . so i found 2 ways for you :

1-with sending span tag in a tag :

$(".more").click(function() {  
 
 var id = this.id;
 $("#"+id).toggleClass('fa-thumbs-up fa-thumbs-down'); 
 
});

.float-left {
  float: left;
}
.cen {
  height: 100% !important;
  padding : 5px;
  padding-left : 0 !important;
} 

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-group list-group-flush"> 
<a class=" list-group-item list-group-item-action" href='#'>Link 1
<span class="cen more far fa-thumbs-down float-left mr-1" id="parent-1"></span>
</a>
</div>

2-i used z-index and negative margin :

$(".more").click(function() {  
 
 var id = this.id;
 $("#"+id).toggleClass('fa-thumbs-up fa-thumbs-down'); 
 
});

span {
  margin-top : -30px !important;
  z-index : 1;
  padding-left : 10px;
  width : 0 !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-group list-group-flush"> 
<a class=" list-group-item list-group-item-action" href='#'>Link 1</a>
<span class="cen more far fa-thumbs-down float-left mr-1" id="parent-2">

</span>
</div>

i hope it can fix your problem or maybe give you an idea.