1
未読メッセージの通知を、フォントの素晴らしい受信トレイの形で、赤丸のアラートと未読のメッセージ数で表示するコードがあります。コードはfirefox（macとpc）、すなわちchrome PCでうまく動作します（これまでのところテスト済み）。フォントCSSを使った素晴らしいfa-stack問題Chrome PCを適用しない
これは私がここでhttp://codepen.io/johnstuif/pen/pvLgYp
を使用した例であるがそれはクローム（マック）上で動作していないのFirefox（Mac）を
のように見えるものです。私は受信トレイを見ることができますが、赤い円と数字を見ることができません。私が想定しています
.fa-stack
{
margin-bottom: -60px;
}
.fa-stack[data-count]:after
{
position:absolute;
right:66.9%;
top:-5%;
content: attr(data-count);
font-size:30%;
padding:.5em;
border-radius:999px;
line-height:.60em;
color: white;
background:rgba(255,0,0,.85);
text-align:center;
min-width:.1em;
font-weight:bold;
}<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a class="navbar-brand dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" id="inbox_container" style="margin-top: -9px">
<span class="fa-stack fa-2x" id="inbox_total" data-count="3">
<i class="fa fa-inbox"></i>
</span>
</a>は、ブラウザのバグの問題がありますが、でも、私は場合、私は私の人生のために、それはクローム（MAC）で動作するように取得する方法を見つけ出すことはできませんできる。
上記のスニペットを修正してください（現用のブラウザで） –
は、これまでのところ、赤いバッジがオフになっていることを確認してください。それは私がスタック上でそれを見ることができる奇妙ですが、私のサイトでは、Macを実行しているChromeで見ることはできません –