Question

我正在尝试使用圆角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而没有任何运气。

Answer 1

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

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

1 个答案: