0

I want to show glyphicon on the top of bootstrap badge.

Can anyone share the css for the same.

I need glyphicon to be placed at the top of badge like given below

enter image description here

PS: I need glyph over (on the top corner of the badge)

Here is the code

<!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      </head>
      <body>
        <div class="container">
          <span class="badge">10</span>
           <span class="glyphicon glyphicon-time"></span>
           
        
        </div>
      </body>
    </html>

10

5 Answers 5

1

You can try below css.

It is working for me

.badge > .glyphicon {
  position: absolute;
  top: -15px;
  background: red;
  padding: 5px;
  border-radius:50%;
}
.badge {
  margin-top: 15px;
  position: relative;
}
0

Try this

.badge {
  margin-top: 20px;
  position: relative;
}
.badge > .glyphicon {
  position: absolute;
  top: -10px;
  background: red;
  padding: 5px;
  border-radius:50%;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <span class="badge">10 <span class="glyphicon glyphicon-time"></span></span>


  </div>
</body>

</html>

2
  • That is what I am looking for..but it is showing square glyph..I need round glyph Sep 28, 2016 at 10:55
  • Updated snippet, check once Sep 28, 2016 at 10:57
0

Try this below

.group .glyphicon.glyphicon-time {
    left: 33px;
    position: absolute;
    top: 4px;
}
.group .badge {
    margin-top: 10px;
   position: relative;
}
.group{ }
<!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      </head>
      <body>
        <div class="container">
          <div class="group">
          <span class="badge">10</span>
           <span class="glyphicon glyphicon-time"></span>
           </div>
        
        </div>
      </body>
    </html>

1
  • thanks for you answer @dhaarani...But this is not what I needed..I need to show glyph on the top of badge Sep 28, 2016 at 12:16
0

you can also try this code and result will look like this enter image description here

<html><head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">

        <div class="badge-container" style="
    display: inline-block;
    position: relative;
    margin: 20px 0;
">
            <span class="badge">10</span>
            <span class="glyphicon glyphicon-time" style="
    position: absolute;
    right: -4px;
    top: -5px;
"></span>
        </div>


    </div>

</body></html>
0

try this:

.glyphicon{
     top: 24px !important;
    font-size: 31px;

}
.badge {
margin-left: -10px;
background-color: #E91E63 !important;
}
<html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
      </head>
      <body>
        <div class="container">
         
           <span class="glyphicon glyphicon-time"></span>
           <span class="badge">10</span>

        </div>
      </body>
    </html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.