I'm struggling to align the font awesome icons with a lower text section in the center. Here is the HTML code snippet:
.education-title {
font-family: Alef, Arial, Helvetica, sans-serif;
text-align: center;
font-size: 1.5em;
}
.edu-container {
padding-top:50px;
display:flex;
flex-wrap: wrap;
list-style: none;
justify-content: space-evenly;
margin:auto;
background-color: white;
font-family: Alef, Arial, Helvetica, sans-serif;
}
.edu-text {
text-align: center;
}
.edu-sub-text {
text-align: left;
}
li > i {
font-size: 100px;
padding-top: 20px;
}<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<ul class="edu-container">
<h2 class="education-title">EDUCATION</h2>
<li>
<i id="icon" class="fas fa-laptop-code"></i>
<h2 class="edu-text">Degree</h2>
<p class="edu-sub-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident aspernatur non animi maiores et magnam repellat tenetur tempora. Voluptatibus perspiciatis obcaecati odio sint vel et id maiores optio fugit rerum?</p>
</li>
<li>
<i id="icon" class="fab fa-free-code-camp"></i>
<h2 class="edu-text">Degree</h2>
<p class="edu-sub-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident aspernatur non animi maiores et magnam repellat tenetur tempora. Voluptatibus perspiciatis obcaecati odio sint vel et id maiores optio fugit rerum?</p>
</li>
<li>
<i id="icon" class="fas fa-university"></i>
<h2 class="edu-text">Degree</h2>
<p class="edu-sub-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident aspernatur non animi maiores et magnam repellat tenetur tempora. Voluptatibus perspiciatis obcaecati odio sint vel et id maiores optio fugit rerum?</p>
</li>
<li>
<i id="icon" class="fas fa-laptop-code"></i>
<h2 class="edu-text">Degree</h2>
<p class="edu-sub-text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident aspernatur non animi maiores et magnam repellat tenetur tempora. Voluptatibus perspiciatis obcaecati odio sint vel et id maiores optio fugit rerum?</p>
</li>
</ul>Trying to centralize the icons like the "Degree" word for better aesthetics, but nothing seems to work. Any help from experienced coders would be highly appreciated!