使用字符的段落圖標

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(...)而不是其他字符。