删除 font awesome 图标周围的白色边框

Question

我一直在尝试将超棒的字体图标改成全蓝色，而图标为白色，但这是我最接近的一次。知道我需要什么add/remove吗？尝试了透明边框，删除 padding/margins，绝对定位在后面一个跨度但没有运气。

 

   .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

也许作为替代解决方案，您可以将“f”放在蓝色圆圈中

我制作了这个片段，希望对您有所帮助：

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

Answer 2

没有边框...您将圆形图标放在比图标大的圆形元素内。包装器元素具有白色背景和蓝色边框。此背景显示在您的图标后面。

改变

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

要有蓝色背景...

Answer 3

一些不必要的和一些冲突的样式。看代码中的注释：

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

删除 font awesome 图标周围的白色边框

Remove white border around font awesome icon

html

css

sass

font-awesome