I've experimented with various CSS methods to align the icons with the text, but I'm facing an issue where the icons seem slightly shifted upward from the text baseline.
Here is how I target the icons:
/* Styling for the full-height sidebar */
.sidebar {
height: 100%; /* Occupies the entire screen height */
width: 180px; /* Sidebar width */
position: absolute; /* Positions the sidebar relative to the browser window */
z-index: 1; /* Places it on top of other elements */
top: 0px; /* Top margin set to 0px */
left: -140px; /* Left margin moves the sidebar off-screen, leaving 20px visible */
padding: 10px 5px 5px 10px; /* Padding settings */
background-color: #111; /* Background color */
overflow-x: hidden;
}
.sidebar a {
text-decoration: none; /* Removes underline from link elements */
font-size: 20px; /* Font size for sidebar links */
color:#818181; /* Font color for sidebar links */
display: block;
padding: 10px; /* Same as sidebar */
}
.sidebar a:hover {
text-decoration: none; /* Removes underline from link elements */
color: #f1f1f1; /* Changes font color of sidebar links on hover */
}
.sidebar:hover {
left: 0; /* Shows the sidebar on-screen when hovered over */
}
i {
float: right;
}<html>
<head>
<title>Master Tracker</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load a font library -->
<link href="https://fonts.googleapis.com/css?family=Yantramanav:100,300,400,500,700,900" rel="stylesheet">
<!-- Load an icon library -->
<script src="https://kit.fontawesome.com/ae6badd0ee.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="sidebar">
<a href="#home"><i class="fa fa-fw fa-home"></i> Home </a>
<a href="#archive"><i class="fas fa-archive"></i></i> Archive </a>
<a href="#newfile"><i class="fas fa-folder-open"></i> New File </a>
<a href="#analytics"><i class="fas fa-chart-pie"></i> Analytics </a>
<a href="#contacts"><i class="fas fa-address-book"></i> Contacts </a>
<a href="#putoutfire"><i class="fas fa-dumpster-fire"></i> Hero </a>
<a href="#search"><i class="fas fa-search"></i> Search </a>
<a href="#help"><i class="fas fa-life-ring"></i> Help </a>
</div>
</body>
</html>The alignment looks fine in the post editor but appears off when viewed in the browser through VS Code. Any assistance on achieving proper icon alignment would be greatly appreciated.