J'ai un code qui montre une notification de messages non lus sous la forme d'une boîte de réception de police-awesome avec une alerte cercle rouge et le nombre de messages qui ne sont pas lus. Le code fonctionne bien (testé jusqu'à présent) dans firefox (mac et pc), c'est à dire et chrome PC.polices impressionnant fa-pile problème avec css ne pas appliquer Chrome PC
C'est l'exemple je http://codepen.io/johnstuif/pen/pvLgYp
Voici à quoi il ressemble sur Firefox (Mac)
Il ne fonctionne pas sur Chrome (Mac). Je suis en mesure de voir la boîte de réception, mais je ne suis pas en mesure de voir le cercle rouge et le numéro.
.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>Je suppose qu'il est un problème de bug avec le navigateur, mais je ne peux pas pour la vie de me comprendre comment le faire fonctionner avec Chrome (Mac) si je même pouvez.
Veuillez modifier l'extrait ci-dessus afin qu'il apparaisse comme il se doit (dans les navigateurs de travail) –
c'est ce que j'ai eu jusqu'à présent, je ne sais pas pourquoi le badge rouge est éteint. C'est bizarre je peux le voir ici sur la pile mais pas sur mon site avec un Mac fonctionnant sous Chrome –