我正在尝试使用圆角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而没有任何运气。
答案 0 :(得分:0)
与我的电脑相比,它似乎与我的平板电脑/手机上的线条高度有所不同。这导致了字体真棒图标的不同y-posistion。所以在我的电脑上它看起来很棒,但在我的移动设备上,图标更接近顶部。所以我将lineheight设置为1px,然后我只用padding-top控制y位置。它可能不是最好的解决方案,但是它起作用了......但是看起来图标的大小似乎有点不同在不同的平台上,但很难说..