删除具有自定义背景颜色的字体真棒图标的边框

Question

我使用字体真棒图标的自定义背景颜色，但它也显示它们周围的边框像这样

我也听说过border-radius:50%，但它并没有完全删除边框，我怎么能删除这些边框。

这是html代码

body {
  background-color: lavender;
}
.social:hover {
  opacity:1;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.social {
  opacity:0.9;
  background:#fff;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
}

.social-fb {
  color: #3B5998;
} 

.social-gp {
  color: #d34836;
}

.social-tw {
  color: #4099FF;
}

.social-ig {
  color: #cd486b;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#" title="Facebook"><i class="fa fa-facebook-square fa-3x social social-fb"></i></a>
<a href="#" title="Twitter"><i class="fa fa-twitter-square fa-3x social social-tw"></i></a>
<a href="#" title="Google+"><i class="fa fa-google-plus-square fa-3x social social-gp"></i></a>
<a href="#" title="Instagram"><i class="fa fa-instagram fa-3x social social-ig"></i></a>

Answer 1

这不是边界，只是白色背景。 只需删除背景样式或使其透明

.social {
    opacity:0.9;
    background: transparent;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
}

如果你想要图标的白色背景，你可以添加一个after元素一个白色背景和边框无线电，所以它匹配图标。

body {
  background-color: lavender;
}
.social:hover {
  opacity:1;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.social {
  position: relative;
  border-radius: 3px;
  opacity:0.9;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
}
.social:after{
  content: "";
  position: absolute;
  top: 4px;
  border-radius: 12px;
  left: 0;
  width: 100%;
  height: 86%;
  background: white;
  z-index: -1;
}

.social-fb {
  color: #3B5998;
} 

.social-gp {
  color: #d34836;
}

.social-tw {
  color: #4099FF;
}

.social-ig {
  color: #cd486b;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#" title="Facebook"><i class="fa fa-facebook-square fa-3x social social-fb"></i></a>
<a href="#" title="Twitter"><i class="fa fa-twitter-square fa-3x social social-tw"></i></a>
<a href="#" title="Google+"><i class="fa fa-google-plus-square fa-3x social social-gp"></i></a>
<a href="#" title="Instagram"><i class="fa fa-instagram fa-3x social social-ig"></i></a>

Answer 2

从.social删除白色背景，并添加:before

＆＃13;

＆＃13;

body {
  background-color: lavender;
}
a {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
a:before {
  content: "";
  background: #fff;
  width: 32px;
  height: 32px;
  position: absolute;
  top: 8px;
  left: 4px;
  display: block;
  border-radius: 9px;
  opacity:0.9;
}
a:hover:before {
  opacity:1;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}
.social:hover {
  opacity:1;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.social {
  opacity:0.9;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
}

.social-fb {
  color: #3B5998;
} 

.social-gp {
  color: #d34836;
}

.social-tw {
  color: #4099FF;
}

.social-ig {
  color: #cd486b;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#" title="Facebook">
  <i class="fa fa-facebook-square fa-3x social social-fb"></i>
</a>
<a href="#" title="Twitter">
  <i class="fa fa-twitter-square fa-3x social social-tw"></i>
</a>
<a href="#" title="Google+">
  <i class="fa fa-google-plus-square fa-3x social social-gp"></i>
</a>
<a href="#" title="Instagram">
  <i class="fa fa-instagram fa-3x social social-ig"></i>
</a>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您看到的是background 正在渗透 - 因此尝试使用标准边界规则解决此问题不会产生预期的结果。

考虑减少line-height图标，如下面的嵌入式代码段所示。

代码段示范：

body {
  background-color: gray;
}
.social:hover {
  opacity:1;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.fa.social { /* more specificity is required in your selector to over-qualify default fontawesome icon line-height */
  opacity:0.9;
  background:#fff;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  /* Additional */
  line-height: 39px;
  border-radius: 10px;
}

.social-fb {
  color: #3B5998;
} 

.social-gp {
  color: #d34836;
}

.social-tw {
  color: #4099FF;
}

.social-ig {
  color: #cd486b;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#" title="Facebook"><i class="fa fa-facebook-square fa-3x social social-fb"></i></a>
<a href="#" title="Twitter"><i class="fa fa-twitter-square fa-3x social social-tw"></i></a>
<a href="#" title="Google+"><i class="fa fa-google-plus-square fa-3x social social-gp"></i></a>
<a href="#" title="Instagram"><i class="fa fa-instagram fa-3x social social-ig"></i></a>

<强>要点：

1. 向自定义选择器添加更多特异性以过度限定默认值 fontawesome图标line-height属性值，例如：.fa.social
2. 使用相对于font-size 的值声明line-height属性， 例如：line-height: 39px
3. 将border-radius属性规则声明为“剪掉”角落溢出， 例如：border-radius: 10px

替代地

考虑使用 stacked icons

示例：

<span class="fa-stack fa-lg social">
  <i class="fa fa-square fa-stack-2x social-fb"></i>
  <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>

代码段示范：

body {
  background-color: gray;
}
.social:hover {
  opacity:1;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.social {
  opacity:0.9;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
}

.social-fb {
  color: #3B5998;
} 

.social-gp {
  color: #d34836;
}

.social-tw {
  color: #4099FF;
}

.social-ig {
  color: #cd486b;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<span class="fa-stack fa-lg social">
  <i class="fa fa-square fa-stack-2x social-fb"></i>
  <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-lg social">
  <i class="fa fa-square fa-stack-2x social-tw"></i>
  <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-lg social">
  <i class="fa fa-square fa-stack-2x social-gp"></i>
  <i class="fa fa-google-plus fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-lg social">
  <i class="fa fa-square fa-stack-2x social-ig"></i>
  <i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
</span>