html - 有没有人在使用 IOS 8.3 使用内容为真棒字体分配颜色时遇到问题？

Question

我试图在 IOS 8.3 上复制一个错误，在该错误中我选择了一个复选框，我的箭头颜色本来是绿色的，但实际上是黑色的。

这是针对此的 IOS 错误修复还是它不支持的内容？

这是我的 SASS/css:

input[type="checkbox"] + .field-label-replaced {
    &:before {
        background-color: $C-Bg-Field;
        border:           1px solid $C-Border; // Use px value to cope with field edges disappearing when zooming out
        box-sizing:       border-box;
        color:            $GIP-OxfamGreen;
        content:          '';
        height:           $D-FieldElement;
        text-align:       center;
        width:            $D-FieldElement;
    }
}

input[type="checkbox"]:checked + .field-label-replaced {
    &:before {
        color:            $GIP-OxfamGreen;
        content:            '\2714';
    }
}

如果您想自己测试，我有一个 codepen 帐户可以显示该问题。

http://codepen.io/mattclaffey/pen/EjNwRw

Answer 1

Unicode字符有点意思，不同的东西显示不同。有时，它们也可以显示为全色符号，而不是单一色调，这意味着它不再受 CSS color 规则的影响。

以此为例: http://jsfiddle.net/f4joLkmg/

在 chrome 和 safari 中，符号显示为带有蓝色雨滴的紫色雨伞，但在 firefox 中，它是单色调图形，因此采用了应用于它的 red 样式.

我没有 IOS 8.3 设备(正如评论中提到的那样，这是出现问题的地方)所以我无法测试复选标记符号是如何在那里显示的，但我会假设该操作系统版本只需选择以特定颜色集显示该符号，这意味着它不再受文本颜色控制。

那么你如何绕过它呢？好吧，你提到了Font Awesome在你的问题标题中，但实际上并没有在这里使用它。如果您已经加载了 Font Awesome，您不妨直接使用它:

&:before {
    font-family: FontAwesome;
    color: $GIP-OxfamGreen;
    content: '\f00c';
}

如果您没有已经在您的元素中使用了 Font Awesome..那么您仍然可能想要考虑使用它，或者类似的东西而不是 unicode 符号。实际的图标字体总是会在一致性方面为您提供更好的结果，而且大多数时候符号看起来也更漂亮一些。