vishal shah vishal shah - 2 months ago 15
CSS Question

How to use glyphicon on top of bootstrap badge in html

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>




Answer

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>