#footer .social-links .facebook a{text-align:center;float: left;width: 46px;height: 46px;border: 2px solid white;border-radius: 100%;margin-right: 25px; /*space between*/
display: flex;align-items: flex-start;transition: all 0.4s;-webkit-transition: all 0.4s;background-color:#3D5A96;}
#footer .social-links .facebook a i{font-size: 30px;align-self:center;color: white;transition: all 0.4s;-webkit-transition: all 0.4s;margin: 0 auto;}
#footer .social-links .facebook a i::before{display:inline-block;text-decoration:none;}
#footer .social-links .twitter a{text-align:center;float: left;width: 46px;height: 46px;border: 2px solid white;border-radius: 100%;margin-right: 25px; /*space between*/
display: flex;align-items: flex-start;transition: all 0.4s;-webkit-transition: all 0.4s;background-color:#00B4D6;}
#footer .social-links .twitter a i{font-size: 30px;align-self:center;color: white;transition: all 0.4s;-webkit-transition: all 0.4s;margin: 0 auto;}
#footer .social-links .twitter a i::before{display:inline-block;text-decoration:none;}
#footer .social-links .google a{text-align:center;float: left;width: 46px;height: 46px;border: 2px solid white;border-radius: 100%;margin-right: 25px; /*space between*/
display: flex;align-items: flex-start;transition: all 0.4s;-webkit-transition: all 0.4s;background-color:#DC4637;}
#footer .social-links .google a i{font-size: 30px;align-self:center;color: white;transition: all 0.4s;-webkit-transition: all 0.4s;margin: 0 auto;}
#footer .social-links .google a i::before{display:inline-block;text-decoration:none;}
#footer .social-links .youtube a{text-align:center;float: left;width: 46px;height: 46px;border: 2px solid white;border-radius: 100%;margin-right: 25px; /*space between*/
display: flex;align-items: flex-start;transition: all 0.4s;-webkit-transition: all 0.4s;background-color:#C00000;}
#footer .social-links .youtube a i{font-size: 30px;align-self:center;color: white;transition: all 0.4s;-webkit-transition: all 0.4s;margin: 0 auto;}
#footer .social-links .youtube a i::before{display:inline-block;text-decoration:none;}<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="footer">
<div class="social-links">
<div class="facebook"><a href="https://www.facebook.com/" ><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></a></div>
<div class="twitter"><a href="https://www.twitter.com" ><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></a></div>
<div class="google"><a href="https://www.google.com" ><i class="icon-google-plus icon-1" aria-hidden="true"></i></a></div>
<div class="youtube"><a href="https://www.youtube.com" ><i class="fa fa-youtube fa-lg" aria-hidden="true"></i></a></div>
</div>
</div>
我的脸书，推特和youtube图标出现但不是google plus图标。为什么会这样？！你可以帮我修改我的代码，我已经有了它的运行片段，谢谢你的好意:)）
答案 0 :(得分：1)
我假设您没有包含"icon-google-plus icon-1"引用的任何图标字体。但由于font-awesome包含一个google plus图标，你可以将它换成fa fa-google-plus：
#footer .social-links .facebook a{text-align:center;float: left;width: 46px;height: 46px;border: 2px solid white;border-radius: 100%;margin-right: 25px; /*space between*/
display: flex;align-items: flex-start;transition: all 0.4s;-webkit-transition: all 0.4s;background-color:#3D5A96;}
#footer .social-links .facebook a i{font-size: 30px;align-self:center;color: white;transition: all 0.4s;-webkit-transition: all 0.4s;margin: 0 auto;}
#footer .social-links .facebook a i::before{display:inline-block;text-decoration:none;}
#footer .social-links .twitter a{text-align:center;float: left;width: 46px;height: 46px;border: 2px solid white;border-radius: 100%;margin-right: 25px; /*space between*/
display: flex;align-items: flex-start;transition: all 0.4s;-webkit-transition: all 0.4s;background-color:#00B4D6;}
#footer .social-links .twitter a i{font-size: 30px;align-self:center;color: white;transition: all 0.4s;-webkit-transition: all 0.4s;margin: 0 auto;}
#footer .social-links .twitter a i::before{display:inline-block;text-decoration:none;}
#footer .social-links .google a{text-align:center;float: left;width: 46px;height: 46px;border: 2px solid white;border-radius: 100%;margin-right: 25px; /*space between*/
display: flex;align-items: flex-start;transition: all 0.4s;-webkit-transition: all 0.4s;background-color:#DC4637;}
#footer .social-links .google a i{font-size: 30px;align-self:center;color: white;transition: all 0.4s;-webkit-transition: all 0.4s;margin: 0 auto;}
#footer .social-links .google a i::before{display:inline-block;text-decoration:none;}
#footer .social-links .youtube a{text-align:center;float: left;width: 46px;height: 46px;border: 2px solid white;border-radius: 100%;margin-right: 25px; /*space between*/
display: flex;align-items: flex-start;transition: all 0.4s;-webkit-transition: all 0.4s;background-color:#C00000;}
#footer .social-links .youtube a i{font-size: 30px;align-self:center;color: white;transition: all 0.4s;-webkit-transition: all 0.4s;margin: 0 auto;}
#footer .social-links .youtube a i::before{display:inline-block;text-decoration:none;}<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="footer">
<div class="social-links">
<div class="facebook"><a href="https://www.facebook.com/" ><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></a></div>
<div class="twitter"><a href="https://www.twitter.com" ><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></a></div>
<div class="google"><a href="https://www.google.com" ><i class="fa fa-google-plus fa-lg" aria-hidden="true"></i></a></div>
<div class="youtube"><a href="https://www.youtube.com" ><i class="fa fa-youtube fa-lg" aria-hidden="true"></i></a></div>
</div>
</div>
答案 1 :(得分：0)
您的脸书，推特和youtube图标都是从font-awesome包中加载的。但是，Google+图标的定义完全不同。
也许您应该将其指定为“fa fa-google-plus”，如here所述？