Everything seems to be working fine in one file, but once I separate the code into HTML and CSS files and run it in Chrome browser, the first two icons end up higher than the third icon. See the image for reference:
here
My main concern is why the line-height property for the first two icons doesn't seem to work properly in Chrome. This results in those two icons being taller than the third one. How can I fix this issue? All I want is for the icons to be aligned horizontally.
.box {
padding: 12px 24px;
display: block;
float: left;
line-height: 1.5;
font-size: 32px;
}<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>
<body>
<div class="theme-bar"><a class="box"><i class="fas fa-globe"></i></a><a class="box"><i class="fas fa-user"></i></a><a class="box"><i class="fas fa-bell"></i><span>3</span></a>
</div>
</body>
</html>