CSS

icon inside a circle css

i {
  background-color: white;
  border-radius: 50%;
  border: 1px solid grey;
  padding: 10px;
}

icon circle css

<!-- import font-awesome -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"/>
        
 <a href="https://www.facebook.com/onlyapproved" title="Facebook brand page" target="_blank"><i class="fab fa-facebook-f iconss"></i></a>
      <style>
        .iconss {
          font-size: 29px;
          background: skyblue;
          color: grey;
          border: 2px solid black;
          border-radius: 50%;
          width: 30px;
          margin-right: 5px;
          font-family: "Font Awesome 6 Brands";
          font-weight: 400;
        }
      </style>