如何正确编码UNICODE FONT ICONS,以便在所有浏览器上呈现

Question

我想将Unicode图标添加到网站,只有unicode -No自定义字体文件.

我知道我可以这样做:

[class^=icon-facebook]:before {
    content: "\00066";
}
[class^=icon-twitter]:before {
    content: "\01F426";
}
[class^=icon-phone]:before {
    content: "\01F4DE";
}
[class^=icon-fax]:before {
    content: "\01F4E0";
}
[class^=icon-email]:before { 
    content: "\01F4E7";
}
[class^=icon-link]:before { 
    content: "\01F517";
}
[class^=icon-pay]:before {
    content: "\01F4B8";
}
[class^=icon-dollar]:before {
    content: "\01F4B5";
}
[class^=icon-yen]:before {
    content: "\01F4B4";
}
[class^=icon-save]:before {
    content: "\01F4B0";
}

的jsfiddle

但是,我读到有些浏览器无法正确呈现"图标"(Unicode字符).有时浏览器会显示空方块而不是Unicode字符.

我如何编写我的CSS代码来防止这种情况发生？

1. 没有自定义字体
2. 没有图像

Answer 1

但是，我读到某些浏览器无法正确呈现“图标”（Unicode 字符）。有时浏览器会显示一个空方块而不是 Unicode 字符。

我该如何编写 CSS 代码来防止这种情况发生？

我不确定您是否想阻止仅渲染空方块，或者您希望所有浏览器的字体都相同。

如果您的意思是希望所有浏览器的字体都相同，并且不想包含任何字体文件或图像文件，您所能做的就是选择所有浏览器都支持的字体并测试它们是否正确显示。

您可以尝试使用以下工具在所有可能的浏览器上测试您的图标： https: //spoon.net/browsers

或者，如果您只是想知道字符是否正确显示，并且如果没有正确显示，您想通过其他方式处理错误，那么您可能会发现以下方法很有用。 /sf/answers/133843181/