I am struggling with positioning icons outside the boxes in my three column, two row grid layout. There are six containers total, arranged on 2 lines with three boxes on each row. The goal is to have icons displayed inline with the heading next to each box.
I have attempted to create a class for the icons within the "row" div but before each "column" div. Unfortunately, the icons do not appear where intended, instead showing up in the top right-hand corner.
.column {
float: left;
width: 22%;
margin-left: 115px;
letter-spacing: 3px;
color: black;
height: 270px;
margin-top: 20px;
border: 1px solid green;
}
.row.i:before {
content: "";
display: inline-block;
clear: both;
}
.row:after {
content: "";
display: table;
clear: both;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<section class="section section-dark">
<div class="row"><i class="fa fa-home"></i>
<div class="column"><i class="fal fa-address-card"></i>
<div class="column"><i class="fas fa-alarm-snooze "></i>
<div class="column "><i class="fad fa-alicorn"></i>
<div class="column">
</div>
</div>
</div>
</div>
</div>
</section>The current outcome is not as expected, with the icons ending up in the top right-hand corner despite efforts to position them elsewhere.