Zeigt nun die Anzahl der Benachrichtigungen auf das Symbol

Ich habe eine Benachrichtigungs-Symbol (font-awesome), die zeigt die Anzahl der Benachrichtigungen.

Ich bin mit einem problem zu versuchen, um die Zahl für die Anzeige in der richtigen position, wie in dargestellt, siehe unten Bild

Zeigt nun die Anzahl der Benachrichtigungen auf das Symbol

Muss ich den text kleiner und nach rechts bewegen und sich ein wenig...
hier ist der code

.header .bubble {
  border-radius: 100%;
  height: 14px;
  width: 14px;
  background-color: rgba(226, 32, 91, 0.77);
  color: #ffffff;
  text-align: top;
  position: relative;
  top: 0px;
  float: right;
  right: -3px;
}

 <a href="javascript:;" id="notification-center" class="icon-set globe-fill" data-toggle="dropdown"><span class="bubble">2</span>

Kann jemand helfen, ich bin neu hier.

  • Warum die Kopf-und bubble haben die gleichen css-Eigenschaften? Sollten Sie separete dieses making-header relativ und Ihre Nummer absolute in das relative
  • Sie haben nicht die gleichen Eigenschaften. .header .Blase.. nicht .header .bubble..
  • Kannst du bitte ein Turnschuh ? Oder zumindest geben Sie uns Ihre markup
  • jsfiddle.net/q84ydjr0
InformationsquelleAutor Shane | 2015-08-03
  1. 24

    beispiel1: mit hintergrund-Bild

    Der beste Weg, dies zu tun ist die Verwendung position:absolute zu Spannweite Kind der Eltern verankern.

    CSS:

    a.notif {
  position: relative;
  display: block;
  height: 50px;
  width: 50px;
  background: url('http://i.imgur.com/evpC48G.png');
  background-size: contain;
  text-decoration: none;
}
.num {
  position: absolute;
  right: 11px;
  top: 6px;
  color: #fff;
}

    HTML:

    <a href="" class="notif"><span class="num">2</span></a>

    Beispiel2: mit font awesome icon

    Wenn Sie verwenden möchten, font-awesome - Symbol

    dies ist der code für es

    CSS:

    a.fa-globe {
  position: relative;
  font-size: 2em;
  color: grey;
  cursor: pointer;
}
span.fa-comment {
  position: absolute;
  font-size: 0.6em;
  top: -4px;
  color: red;
  right: -4px;
}
span.num {
  position: absolute;
  font-size: 0.3em;
  top: 1px;
  color: #fff;
  right: 2px;
}

    HTML:

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<a class="fa fa-globe">
  <span class="fa fa-comment"></span>
  <span class="num">2</span>
</a>

    • Das ist perfekt! Danke, wie würde ich das Bild ändern, um ein Symbol? (<i class="fa fa-globe"></i>)
    • nicht das bekommen, was Sie fordern
    • Auch in Ihrem Beispiel haben Sie verwendet ein Bild, ich möchte ein Symbol...
    • Sie können sich bewerben position relativ zu diesem Symbol und tun das gleiche
    • Und wie mache ich das rote Textfeld breiter?
    • warten Lösung für Ihr icon
    • siehe aktualisierte Antwort Hinzugefügt, icon-Stil
    • Danke. Das ist toll,

    InformationsquelleAutor eirenaios
Schreibe einen Kommentar