移动设备上的Fontawesome字体大小更改

时间:2015-05-08 09:47:50

标签: font-awesome

我正在尝试使用圆角div和fontawesome制作社交图标。它在我的桌面计算机上运行良好,但在移动设备上,字体大小似乎变小了。

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;
    }

我试图使用字体真棒CSS而没有任何运气。

1 个答案:

答案 0 :(得分:0)

与我的电脑相比,它似乎与我的平板电脑/手机上的线条高度有所不同。这导致了字体真棒图标的不同y-posistion。所以在我的电脑上它看起来很棒,但在我的移动设备上,图标更接近顶部。所以我将lineheight设置为1px,然后我只用padding-top控制y位置。它可能不是最好的解决方案,但是它起作用了......但是看起来图标的大小似乎有点不同在不同的平台上,但很难说..