html - 如何为 FA 图标添加背景

Question

我想为我的 FA 图标添加背景，但要在它们周围设置一个低不透明度的圆圈。

代码:

.social {display:block; float:left; margin:auto; height: 50px; font-size: 12px; padding-top:7px; width: 200px; text-align: center; text-decoration: none; border-bottom: 5px solid black;}
.social i {cursor: pointer; display: inline-block; position: relative; transition: 0.5s;}
.social i:after {content: '\00bb'; position: absolute; opacity: 0; top: -1px; right: -50px; transition: 0.2s;}
.social:hover i {padding-right: 20px; color: white;}
.social:hover i:after {opacity: 1; right: 0;}
.my-facebook {background: transparent; color: #3b5998;}
.my-instagram {background: transparent; color: white;}
.my-codepen{background: transparent; color: black;}
.my-github{background: transparent; color: #f5f5f5;}
.my-linkedin{background: transparent; color: #00a0dc;} 
.my-fcc{background: transparent; color: #006400;}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="buttons">
  <a class="social my-codepen" target='_blank' href="#"><i class="fa fa-codepen fa-3x"></i></a>
  <a class="social my-github" target='_blank' href="#"><i class="fa fa-github fa-3x"></i></a>
  <a class="social my-facebook" target='_blank' href="#"><i class="fa fa-facebook fa-3x"></i></a>
  <a class="social my-fcc" target='_blank' href="#"><i class="fa fa-free-code-camp fa-3x"></i></a>
  <a class="social my-linkedin" target='_blank' href="#"><i class="fa fa-linkedin fa-3x"></i></a>
  <a class="social my-instagram" target='_blank' href="#"><i class="fa fa-instagram fa-3x"></i></a>
</div>

我试图改变“背景”，但它改变了整个广场。我只想在图标本身周围提供圆形背景或圆形边框。感谢大家!

Answer 1

您需要使用堆叠图标。我在下面为您修改了您的示例。

代码

.social {display:block; float:left; margin:auto; height: 50px; font-size: 12px; padding-top:7px; width: 200px; text-align: center; text-decoration: none; border-bottom: 5px solid black;}
.social i {cursor: pointer; display: inline-block; transition: 0.5s;}
.social i:after {content: '\00bb'; position: absolute; opacity: 0; top: -1px; right: -50px; transition: 0.2s;}
.social:hover i {padding-right: 20px; color: white;}
.social:hover i:after {opacity: 1; right: 0;}
.my-facebook {background: transparent; color: #3b5998;}
.my-instagram {background: transparent; color: black;}
.my-codepen{background: transparent; color: black;}
.my-github{background: transparent; color: black;}
.my-linkedin{background: transparent; color: #00a0dc;} 
.my-fcc{background: transparent; color: #006400;}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="buttons">
    <a class="social my-codepen" target='_blank' href="#">
      <span class="fa-stack fa-lg">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-codepen fa-stack-1x fa-inverse"></i>
      </span>
    </a>
    <a class="social my-github" target='_blank' href="#">
      <span class="fa-stack fa-lg">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-github fa-stack-1x fa-inverse"></i>
      </span>
    </a>
    <a class="social my-facebook" target='_blank' href="#">
      <span class="fa-stack fa-lg">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
      </span>
    </a>
    <a class="social my-fcc" target='_blank' href="#">
      <span class="fa-stack fa-lg">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-free-code-camp  fa-stack-1x fa-inverse"></i>
      </span>
    </a>
    <a class="social my-linkedin" target='_blank' href="#">
      <span class="fa-stack fa-lg">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-linkedin  fa-stack-1x fa-inverse"></i>
      </span>
    </a>
    <a class="social my-instagram" target='_blank' href="#">
      <span class="fa-stack fa-lg">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-instagram  fa-stack-1x fa-inverse"></i>
      </span>
    </a>
</div>

Jsfiddle Here