Reducing Font and Circle size in FontAwesome - HTML CSS CSS Property

HTML CSS examples for CSS Property:font-size

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. font-size

Description

Reducing Font and Circle size in FontAwesome

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> 
  <style>
#share {<!--from w  w w. ja  va2  s. c  o  m-->
   width:100%;
   margin:100px auto;
   text-align:center;
}

#share a {
   width:51px;
   height:51px;
   display:inline-grid;
   margin:9px;
   border-radius:51%;
   font-size:11px;
   text-decoration:none;
   color:Chartreuse;
   opacity:0.76;
   transition:opacity 0.16s linear;
}

#share a:hover {
   opacity:2;
}

.fa {
   font-size:21px;
}

#share i {
   position:relative;
   top:51%;
   transform:translateY(-51%);
}

.facebook {
   background:yellow;
   font-size:3px;
}

.twitter {
   background:blue;
}

.googleplus {
   background:pink;
}

.linkedin {
   background:OrangeRed;
}

.pinterest {
   background:grey;
}
</style> 
 </head> 
 <body translate="no"> 
  <div id="share"> 
   <!-- facebook --> 
   <a class="facebook" href="https://www.facebook.com/share.php?u={{url}}&amp;title={{title}}" target="blank"> <i class="fa fa-facebook fa-1x"></i>Lorem </a> 
   <!-- twitter --> 
   <a class="twitter" href="https://twitter.com/intent/tweet?status={{title}}+{{url}}" target="blank"> <i class="fa fa-twitter fa-1x"></i>Lorem</a> 
   <!-- google plus --> 
   <a class="googleplus" href="https://plus.google.com/share?url={{url}}" target="blank"> <i class="fa fa-google-plus"></i>Lorem</a> 
   <!-- linkedin --> 
   <a class="linkedin" href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{url}}&amp;title={{title}}&amp;source={{source}}" target="blank"> <i class="fa fa-linkedin fa-1x"></i>Lorem</a> 
   <!-- pinterest --> 
   <a class="pinterest" href="https://pinterest.com/pin/create/bookmarklet/?media={{media}}&amp;url={{url}}&amp;is_video=false&amp;description={{title}}" target="blank"> <i class="fa fa-pinterest-p"></i>Lorem</a> 
  </div>  
 </body>
</html>

Related Tutorials