css - 使用字符的段落图标

Question

我需要为某些类型的段落设置一个图标，例如注释或警告消息。我使用 @font-face 规则和 :before 伪元素将字符用作图标，如下所示：

p.warning:before    {content: '⚠';}

问题是：如何在段落中以正确的方式呈现/设置此图标的样式。我的意思是在左边/开始边距的顶部？作为解决方案，我使用了以下规则：

p.warning   {display: table;}
p.warning:before    {display: table-cell;}

它在 WebKit 和 Gecko 中运行良好，但在 opera 中运行良好。这是输出：

http://richstyle.org/demo-web.php

请问有什么建议吗？

Answer 1

您需要将其 unicode 字符代码放入content属性中，而不是使用实际字符本身，如下所示：

p.warning:before { 
    content: "\26A0";
}

您提供的符号代码可在此处找到。请注意，某些字体可能不支持扩展的 Unicode 字符。例如，在 Windows 7 上使用 Chrome对 JSFiddle 进行快速测试会产生一个空白矩形（不支持字符）。您可能要考虑使用带有background-image: url(...)代替的图像或其他字符。