Question

大家好，所以我在一个橙色背景的网站上工作。我使用Font Awesome图书馆中的白色社交图标。

这是我工作的结果

CSS

@import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-    awesome.min.css');

body {
margin: 10px;
background:#da4a10;
}
#social:hover {
            -webkit-transform:scale(1.1); 
-moz-transform:scale(1.1); 
-o-transform:scale(1.1); 
        }
#social {
-webkit-transform:scale(0.8);
            /* Browser Variations: */
-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;
        }   
.fa-3x{
color: white;
}
.social-fb:hover {
            color: #3B5998;
        }
.social-tw:hover {
            color: #4099FF;
        }
.social-gp:hover {
            color: #d34836;
        }
        .social-em:hover {
            color: #f39c12;
        }

HTML

<div id="row">
            <div class="col-xs-2 col-sm-8 col-lg-2 col-md-6">
              <a href="#">
                <i id="social" class="fa fa-facebook-square fa-3x social-fb"></i>
              </a>
            </div>
            <div class="col-xs-2 col-sm-8 col-lg-2 col-md-6">
              <a href="#">
                <i id="social" class="fa fa-twitter-square fa-3x social-tw"></i>
              </a>
            </div>
            <div class="col-xs-2 col-sm-8 col-lg-2 col-md-6">
              <a href="#">
                <i id="social" class="fa fa-google-plus-square fa-3x social-gp"></i>
              </a>
            </div>
            <div class="col-xs-2 col-sm-8 col-lg-2 col-md-6 ">
              <a href="#">
                <i id="social" class="fa fa-envelope-square fa-3x social-em"></i>
              </a>
            </div>
          </div>

http://jsfiddle.net/DTcHh/5582/

我需要一个解决方案，因为当我将鼠标悬停在社交图标上时，它的外观并不是那么好看。我尝试在图标上添加白色背景，但它仍然无法正常运行。

Answer 1

由于您使用的是Font Awesome，因此有一个名为fa-square的图标。这具有方形社交媒体图标的确切形状。此外，Font Awesome有机会堆叠图标。如果您在fa-square下堆叠fa-twitter-square，例如并使fa-square变为白色，它将解决您的问题。

<强> HTML

<div id="row">
    <div class="col-xs-2 col-sm-8 col-lg-2 col-md-6">
        <a href="#">
            <span class="fa-stack fa-2x social social-fb">
                <i class="fa fa-square fa-stack-1x white-bg"></i>
                <i class="fa fa-facebook-square fa-stack-2x "></i>                    
            </span>
        </a>
    </div>
    <div class="col-xs-2 col-sm-8 col-lg-2 col-md-6">
        <a href="#">
            <span class="fa-stack fa-2x social social-tw">
                <i class="fa fa-square fa-stack-1x white-bg"></i>
                <i class="fa fa-twitter-square fa-stack-2x "></i>                    
            </span>
        </a>
    </div>
    <div class="col-xs-2 col-sm-8 col-lg-2 col-md-6">
        <a href="#">
            <span class="fa-stack fa-2x social social-gp">
                <i class="fa fa-square fa-stack-1x white-bg"></i>
                <i class="fa fa-google-plus-square fa-stack-2x "></i>                    
            </span>
        </a>
    </div>
    <div class="col-xs-2 col-sm-8 col-lg-2 col-md-6 ">
        <a href="#">
            <span class="fa-stack fa-2x social social-em">
                <i class="fa fa-square fa-stack-1x white-bg"></i>
                <i class="fa fa-envelope-square fa-stack-2x "></i>                    
            </span>
        </a>                 
    </div>
</div>

<强> CSS

/* Optional theme */
@import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');

body {
    background: #DA4A10;  
    margin: 10px;      
}
.social {
    color: #F9F9F9;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;     
}
/* Definition of the white background */
.white-bg {
    color: white;
    font-size: 54px;
    opacity: 0;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s; 
}  
.social-fb:hover{
    color: #3B5998;
}
.social-tw:hover {
    color: #4099FF;
}
.social-gp:hover {
    color: #d34836;
}
.social-em:hover {
    color: #f39c12;
}
/* Show the white background on hover */
.social-fb:hover .white-bg, .social-tw:hover .white-bg,
.social-gp:hover .white-bg, .social-em:hover .white-bg {    
    opacity: 1;
}

行动中的解决方案：http://jsfiddle.net/DTcHh/6084/

需要css技巧来解决这个问题

1 个答案: