Twitter Bootstrap Question posted in

Why does my i class "icon-google-plus" doesn't appear?-Twitter bootstrap

#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>

My facebook, twitter, and youtube icons appear but not the google plus icon. Why is it like that?! Can you please help me fix my code, i already have a running snippet of it, thank you for your kindness 🙂

Tags:

2

Answers


  1. 0

    I’d assume you haven’t included whatever icon font the "icon-google-plus icon-1" refers to. But since font-awesome includes a google plus icon, you could just swap it for 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>
    Login or Signup to reply.
  2. 0

    Your facebook, twitter and youtube icons are loaded from font-awesome package. Google+ icon, however, is defined completely different.

    Maybe you should specify it as “fa fa-google-plus”, as described here?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search