按钮文本在移动设备上旋转

Question

我创建了浮动回到顶部的按钮。在PC上一切都很好，但是在移动设备上，按钮内的文字旋转了一点，并且需要花费一些时间来加载它。是什么导致这种情况？

这是使用materializecss的按钮：

<a class="back-to-top btn-floating btn-large waves-effect waves-light green">
    <i class="material-icons">↑</i>
</a>

这是css：

a.back-to-top {
    display: none;
    width: 60px;
    height: 60px;
    position: fixed;
    right: 20px;
    bottom: 20px;
}

此功能滚动顶部：

var amountScrolled = 300;

$(window).scroll(function() {
    if ( $(window).scrollTop() > amountScrolled ) {
        $('a.back-to-top').fadeIn('slow');
    } else {
        $('a.back-to-top').fadeOut('slow');
    }
});
$('a.back-to-top').click(function() {
    $('html, body').animate({
        scrollTop: 0
    }, 700);
    return false;
});

在PC上：

在移动设备上：

修改：如果您想自己查看this是演示

Answer 1

检查font-style: italic;或transform:skew(...)

是的，font-style: italic;继承自<i>元素。

你应该把

i.material-icons { font-style:normal; }

压制倾斜。