Search code examples
htmlcssalignmentfont-awesomecentering

align font awesome icon and a pragraph

it seems like i can't get the green "v" mark icon to be at the same line as the paragraph. the "v" is always above it. it started when i used flex or grid to space between the paragraph and the icon i tried justify content , align items padding top nothing changes it. anyone know how to fix this?

  <style>
.content {
background: #3494db;
color: #fff;
width: 65%;
margin: auto;
display: grid;
grid-template-columns: 1fr 1fr;
}
.column1{
  color: black;
  line-height: 15px;
text-align: right;
margin-top: 5px;
margin-bottom: 10px;
padding-right: 25px;
}
.column2{
color: black;
line-height: 15px;
text-align: right;
margin-top: 5px;
margin-bottom: 10px;
padding-right: 25px;
}
.column1 i {
display: flex;
justify-content: space-between;
margin-left: 10px;
}
.column2 i {
display: flex;
justify-content: space-between;
margin-left: 10px;
}
.column1 p{
border-bottom: 1px #fff solid;
}
.column2 p{
border-bottom: 1px #fff solid;
}
.content i{
color: rgb(50, 230, 50);
font-size: 18px;
}
</style>


</head>
<body>
  <div class="content"> 
       
    <div class="column1">
          <p><i class="far fa-check-circle"></i> Free for all</p>
    </div>
    
    <div class="column2">
      <p> <i class="far fa-check-circle"></i> Free for all</p>
    </div>
</div>


</body>
</html>
Solution

  • Instead of having the column1 i and column 2 i have display: flex; change it to display; float; then on both put float: left;

    this will move them both checks in line with the paragraph, but the white underline goes through the check marks. To fix this, I added 5px of padding-bottom to column1 p and column2 p. My CSS for those 4 classes looked like this:

            .column1 i {
           display: float;
           justify-content: space-between;
           margin-left: 10px;
           float: left;
           }
        .column2 i {
           display: float;
           justify-content: space-between;
           margin-left: 10px;
           float: left;
           }
       .column1 p{
           border-bottom: 1px #fff solid;
           padding-bottom: 5px;
           }
       .column2 p{
           border-bottom: 1px #fff solid;
           padding-bottom: 5px;
           }

    Let me know if this is what you were looking for!