I am trying to create a circle with a tag and putting icon inside that circle. But that icon is coming little down.
<body>
<a><i class="fab fa-facebook-f"></i></a>
</body>
* {
box-sizing: border-box;
}
body {
background: black;
}
a {
display: inline-block;
padding: 1rem;
border: 1px solid #fff;
cursor: pointer;
border-radius: 50%;
margin-right: 1rem;
width: 44px;
height: 44px;
text-align: center;
transition: all 0.2s;
}
i {
color: white;
}<html><head><title>Page Title</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" /></head><body><a><i class="fab fa-facebook-f"></i></a></body></html>