Question

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

我的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>

Answer 1

只需将您的社交图标包装在圆圈内。

HTML：

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

更新了CSS：

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

DEMO

Answer 2

更新了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>

更新了CSS：

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

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

社会图标背后的空心圆

2 个答案: