1

メモや警告メッセージなど、ある種の段落にアイコンを設定する必要があります。@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

何か提案はありますか？

4

1 に答える 1

1

content実際の文字自体を使用する代わりに、次のようにプロパティにUnicode 文字コードを配置する必要があります。

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

あなたが与えたシンボルのコードはここにありました。一部のフォントは拡張 Unicode 文字をサポートしていない場合があることに注意してください。たとえば、 Windows 7 の Chromeで JSFiddleを簡単にテストすると、空白の四角形が表示されます (サポートされていない文字)。background-image: url(...)代わりに画像を使用するか、別のキャラクターを使用することを検討してください。

于 2012-08-15T09:45:47.437 に答える