Currently tackling a project involving adjusting the positioning of elements within a sidebar. The sidebar holds Font Awesome icons and corresponding text elements, with the goal of moving both the icons and text together as one unit using attribute and class selectors.
Below is the HTML and CSS code applied to target the icons and text elements:
HTML
<li> <a href= "#"> <i class="fas fa-search "></i> <span class="nav-color move-text">Search</span> </a> </li>
<li> <a href= "#"> <i class="fa-solid fa-gears "></i><span class="nav-color move-text">Settings</span> </a> </li>
<li> <a href= "#"> <i class="fa-solid fa-inbox "></i><span class="nav-color move-text">Updates</span> </a> </li>
CSS
[class*="fa-"] {
position:relative;
top:auto;
left:15px;
bottom:20px;
right:auto;
color:#a5a8a8
}
.move-text{
position:relative;
left:15px;
}
The issue arises when trying to adjust the position of the text elements despite applying the left property to the move-text class. The icons act incorrectly when using position: absolute or relative.
Experiments show varying outcomes based on different positioning combinations, but the main problem remains with the inability to fine-tune the elements' positions successfully.
If anyone has faced this challenge before, any insights or assistance would be highly appreciated. Thank you.