Fontawesome font-size change on mobile devices -

i trying make social icons using round corner divs , fontawesome. works on desktop computer, on mobile font size seems rendered smaller.

html:

 <a  href="link" target="blank">     <div class="social-icon facebook">       <i class="fa fa-facebook"></i>     </div>  </a> 

css:

   .social-icon{       -moz-border-radius: 138px;       -webkit-border-radius: 138px;       border-radius: 138px;       border: 5px solid;       text-align: center;       width: 50px;       height: 50px;       display: inline-block;       margin-bottom: 15px;      }      /* facebook icon styling */    .social-icon.facebook {       font-size: 20px;       padding-top: 6px;       border-color: #3b5998;       background-color: #3b5998;       color: #ffffff;     } 

i have tried play around font awesome css without luck.

it seems had lineheight rendered differently on tablet/smarphone compared pc. resulted in different y-posistion of font-awesome icons. on pc looked great, on mobile devices icons closer top. have set lineheight 1px , control y-position padding-top.. might not best solution, worked... still seems size of icons differs little on different platform, hard tell..