使用字符的段落图标

Question

我需要为某些类型的段落设置图标，如笔记或警告消息。 我使用的@ font-face规则和：before伪元素来使用的字符作为图标，就像这样：

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

的问题是：如何展示/风格这个图标以正确的方式段落。 我的意思是在左侧/开始边距的顶部？ 为我所用，这些规则的解决方案：

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

它工作在WebKit和壁虎，但不是歌剧罚款。下面是输出：

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

任何建议吗？

Answer 1

而不是使用实际的字符本身，你需要把它的Unicode字符代码在content属性，像这样：

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

的符号你给的代码被发现here。请注意，某些字体可能不支持扩展的Unicode字符。例如，在Windows 7上使用Chrome执行quick test on JSFiddle会生成一个空白矩形（不支持字符）。您可能需要考虑使用background-image: url(...)而不是其他字符。