CSS伪内容箭头在手机上有斜角

Question

我在前伪元素中使用CSS转义字符▶（\ 25b6）作为视频播放按钮的一部分。

我的所有桌面浏览器上的箭头都很好看：

但是当我在我的Android手机（Galaxy Note 3）上将它加载到Chrome上时，它就会有神奇（又丑陋）的斜角：

CSS（SCSS）：

.play {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 0;
    color: white;
    padding: 0;
    background-color: rgba(black, 0.3);
    box-shadow: none;
    &:before {
        color: white;
        position: absolute;
        content: "\25b6";
        display: block;
        font-size: 2.75rem;
        width: 4rem;
        height: 4rem;
        line-height: 1.5;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        background-color: rgba(black, 0.8);
        transition: transform 1s;
    }
} 

问题：

如何删除此斜角？我知道我可以使用css triangles创建箭头（经过测试并且可以正常工作），但如果可能的话，我希望避免使用额外的标记。

我想我更好奇的是如何覆盖chrome应用于此角色的样式，而不是变通方法。

Answer 1

您应该尝试使用FontAwesome ...它包含您将使用的所有符号字形，包括播放图标;）

http://fortawesome.github.io/Font-Awesome/