删除字体真棒图标周围的白色边框

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...