Css 社交偶像背后的空心圈

使用CSS，我想在社交图标后面放置一个空心圆，当我将鼠标悬停在社交图标上方时，空心圆会被填满，当我尝试这样做时，圆圈会被挤压到社交图标的右侧（fontawesome）。我想让图标在圆圈内居中，如果我想让几个社交图标在一个相距100像素的圆圈内水平对齐，我也想知道最好的方法。谢谢

我的CSS代码：

.circle {
    border: 2px solid #666;
    border-radius: 50%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;

    -webkit-box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
    box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
    width: 80px;
    height: 80px;
    z-index: 86;

    -webkit-transition: background-color .5s ease-in-out;
    -moz-transition: background-color .5s ease-in-out;
    -o-transition: background-color .5s ease-in-out;
    -ms-transition: background-color .5s ease-in-out;
    transition: background-color .5s ease-in-out;
}

.circle:hover {
    background-color: #666;
}

.fa-twitter {
  color: #fff;
  z-index: 99;
}

Wordpress-Header.php

<div class='header-social-icons'>
                    <div class='twitter'>
                        <i class='fa fa-twitter'></i>
                        <i class='circle'></i>          
                    </div>
                    </div>

---

只需将您的社交图标包装在circle div中即可

HTML:

更新的HTML:

<div class='header-social-icons'>
                    <div class='twitter'>
                        <i class='fa fa-twitter'></i>
                        <i class='circle'>Twitter</i>
                        <i class='circle'>Facebook</i>
                        <i class='circle'>Google+</i>
                        <i class='circle'>Reddit</i>
                    </div>
                    </div> 

---

---

我希望这有帮助。更新以对齐文本的宽度和高度。

效果很好，但twitter图标似乎仍然略高于中心，有没有办法将其降低一点？编辑：算了吧。使用了页边空白。。

.fa-twitter {  display:block; }
.circle { width: 50px; height: 50px; padding: 15px;}

<div class='header-social-icons'>
                    <div class='twitter'>
                        <i class='fa fa-twitter'></i>
                        <i class='circle'>Twitter</i>
                        <i class='circle'>Facebook</i>
                        <i class='circle'>Google+</i>
                        <i class='circle'>Reddit</i>
                    </div>
                    </div> 

   .circle {
            display: inline-block;
            margin-right: 100px;
            text-align: center;
            line-height: 75px; 
    border: 20px solid #666;
    border-radius: 50%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;

    -webkit-box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
    box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
    width: 80px;
    height: 80px;
    z-index: 86;

    -webkit-transition: background-color .5s ease-in-out;
    -moz-transition: background-color .5s ease-in-out;
    -o-transition: background-color .5s ease-in-out;
    -ms-transition: background-color .5s ease-in-out;
    transition: background-color .5s ease-in-out;
}