html - 如何正确编码 UNICODE 字体图标以便它们在所有浏览器上呈现

Question

我想将 Unicode 图标添加到网站，并且只有 unicode - 没有自定义字体文件。

我知道我可以做类似的事情:

[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 字符)。有时浏览器会显示一个空方 block 而不是 Unicode 字符。

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

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

Answer 1

我知道您不想为字体下载或图像下载进行“额外”调用。如果您坚持将其全部保留在 CSS 中，您可以尝试使用 Base64，例如:

<style type="text/css">
div.image {
    width:            14px;
    height:           14px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGMjdBMjVGOTU2NTAxMUUyOUFBN0EzOUYwOEVBMkQ1MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGMjdBMjVGQTU2NTAxMUUyOUFBN0EzOUYwOEVBMkQ1MCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkYyN0EyNUY3NTY1MDExRTI5QUE3QTM5RjA4RUEyRDUwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkYyN0EyNUY4NTY1MDExRTI5QUE3QTM5RjA4RUEyRDUwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+AND5IAAAAHBJREFUeNpi/P//P4OJiQkDGmAG4r9AzATl/4Oy/zHgAWfOnIFrOAjE/5HwHyj9F4r/I9G48CEGJBdQA4AMZWCBcuypZSo1XUhbAw8SCHBi8EFkA/9TwXH/kCPFYeRFygEqRMoBmuQURlDhQE0AEGAA1LJE38CAHLYAAAAASUVORK5CYII=');
}
</style>

这将放置汉堡菜单图标。这是一个工作示例:Demo

它肯定会在所有浏览器中看起来完全一样，因为它是图像而不是字体。

您可以在此处制作任何 png 图像: PNG to Base64

祝你好运:)