Remove white border around font awesome icon

Question

I've been trying to hack the font awesome icon to be all the blue with the icon white but this is the closest I've been. Know what I need to add/remove? Tried transparent borders, remove padding/margins, positioned absoluted a span behind with no luck.

 .b-social-media-shares__a { width: 48px; height: 48px; border-radius: 50%; text-align: center; margin: 0 6px; &:hover { box-shadow: 1px 3px 5px grey; } i { color: white; line-height: 48px; font-size: 25px; } }.b-social-media-shares--facebook { background-color: #4267B2; }.b-social-media-shares--facebook.fa-facebook-f { color: #4267B2; line-height: 48px; font-size: 28px; }.b-social-media-shares--facebook.fa-facebook-f:before { content: "\f09a"; background-color: white; border-radius: 50%; }.b-social-media-shares--facebook:hover { background-color: white; }.b-social-media-shares--facebook:hover i { color: #4267B2; }

 <a id="facebook" href="" class="b-social-media-shares__a b-social-media-shares--facebook dnt" target="_blank"> <i class="fab fa-facebook-f"></i> </a>

Answer 1

Some unnecessary and some conflicting styles. See comments in the code:

.b-social-media-shares__a {
  display: inline-flex; // added
  align-items: center; // added
  justify-content: center; // added
  text-decoration: none; // added, but not required (removes the underline)

  width: 48px;
  height: 48px;
  border-radius: 50%;
  // text-align: center; // not required because of `justify-content`
  margin: 0 6px;

  &:hover {
    box-shadow: 1px 3px 5px grey;
  }

  i {
    color: white;
    // line-height: 48px; // not really required
    font-size: 25px;
  }
}
.b-social-media-shares--facebook {
  background-color: #4267b2;
}

.b-social-media-shares--facebook .fa-facebook-f {
  // color: #4267b2; // not required (it should be white)
  // line-height: 48px; // not really required
  font-size: 28px;
}

// This whole ruleset is not required
// .b-social-media-shares--facebook .fa-facebook-f:before {
//   content: "\f09a";
//   background-color: white;
//   border-radius: 50%;
// }

.b-social-media-shares--facebook:hover {
  background-color: white;
}

.b-social-media-shares--facebook:hover i {
  color: #4267b2;
}

Answer 2

Maybe as an alternate solution you could place just the "f" in a blue circle

I made this snippet, I hope it helps:

https://codesandbox.io/s/icy-dust-2vfvi?file=/src/index.js:69-132

Answer 3

There is no border... You're putting a circle icon inside a circular element that's larger than the icon. The wrapper element has a white background and a blue border. This background is showing behind your icon.

Change

.b-social-media-shares--facebook .fa-facebook-f:before {
      background-color: white;
    }

to have a blue background...