Overlap Notification Badge on Glyph in Bootstrap 3

overlap notification badge on glyph in Bootstrap 3

Try this:

/* CSS used here will be applied after bootstrap.css */
.badge-notify{
   background:red;
   position:relative;
   top: -20px;
   left: -35px;
}

<div class="container">
  <button class="btn btn-default btn-lg btn-link" style="font-size:36px;">
    <span class="glyphicon glyphicon-comment"></span>
  </button>
  <span class="badge badge-notify">3</span>
</div>

Bootply: http://www.bootply.com/7teIvGLIzY

How to use glyphicon on top of bootstrap badge in html

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>

Ionic range & badge overlap

What you observe is the normal behaviour of badges in Ionic: they overlap to the components.

Here is an example of custom badge CSS class which is more similar to icons:

angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) {  $scope.count=5;});

.mybadge.badge-royal {    background-color: #886aea;    color: #fff;}
.mybadge {    background-color: transparent;    color: #AAAAAA;    z-index: 1;    display: inline-block;    padding: 3px 8px;    border-radius: 10px;    vertical-align: baseline;    text-align: center;    white-space: nowrap;    font-weight: bold;    font-size: 14px;    line-height: 16px;    -webkit-box-flex: 0;    -webkit-flex: 0 ;    -moz-box-flex: 0;    -moz-flex: 0;    -ms-flex: 0;    flex: 0;    display: block;    min-width: 24px;}

<html ng-app="ionicApp"><head>  <meta charset="utf-8">  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">  <title>Badges</title>  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script></head>
<body ng-controller="MainCtrl">
  <ion-header-bar class="bar-positive">    <h1 class="title">Badges</h1>  </ion-header-bar>
  <ion-content>
    <div class="list">
      <div class="item item-divider">        Original Ionic badge      </div>
      <div class="item range range-{{selection.secondary}}">        <i class="icon ion-ios-timer"></i>        <input type="range" name="volume" min="0" max="10" ng-model="count">        <span class="badge badge-royal">5</span>      </div>
      <div class="item range range-positive">        <i class="icon ion-ios-sunny-outline"></i>        <input type="range" name="volume" min="0" max="100" value="33">        <i class="icon ion-ios-sunny"></i>      </div>
      <a class="item item-icon-left" href="#">        <i class="icon ion-person-stalker"></i> Friends        <span class="badge badge-assertive">0</span>      </a>            <div class="item item-divider">        Custom badge for slider      </div>            <div class="item range range-positive">        <i class="icon ion-ios-timer"></i>        <input type="range" name="volume" min="0" max="10" ng-model="count">        <i class="mybadge badge-royal">{{count}}</i>      </div>
    </div>
  </ion-content>
</body>
</html>

overlay on glyphicons when hover

I got something like this: https://jsfiddle.net/d04pLr6q/

This may not be what you wanted to achieve, not sure ;)

   #admin_menu .glyphicon{
    position: absolute;
    font-size: 24px;
    left: 50%;
    margin-left: -12px;
    top: 8px;
    }
    #admin_menu { text-align: left; list-style-type: none; margin: 30px 0px 30px 0px; padding: 0px; }
    #admin_menu li{ 
    display: inline-block; 
    margin: 0px 10px 0px 0px; 
    padding: 0px;
    }
    #admin_menu li a { 
    display:block;
    position: relative;
    height:40px;
    width: 60px;
    padding: 0 10px;
    font-size:16px;
    padding-top:12px;
    text-decoration:none;
     }
     #admin_menu .description{
       color:transparent;
       position: absolute;
       width: 100%;
       height:100%;
       top: 0;
       left:0;
       text-align: center;
       line-height: 40px;
       display: block;
       transition: all 0.3s;
     }
    #admin_menu li a:hover .description{
      color: white;
      background-color: rgba(51, 122, 183, 0.75);
    }

How can I overlay a number on top of a FontAwesome glyph?

You css should look something like:

.contain-i-e-s,.icon-empty-star,.text-i-e-s{
  height:100px; width:100px;
}
.contain-i-e-s{
  position:relative;
}
.text-i-e-s{
  text-align:center; position:absolute;
}

Your HTML might look like:

<div class='contain-i-e-s'>
  <i class='icon-empty-star'></i>
  <div class='text-i-e-s'>99</div>
</div>

Bootstrap 3 unable to display glyphicon properly

OK, my problem was not answered by the above. I had the fonts folder at the same location as the bootstrap css and js folders (eg /theme/bootstrap3/..), but it was looking for the font folder in the root (eg /fonts/glyph.. .woff)

The solution for me was to set the @icon-font-path variable to the correct relative path:

Eg @icon-font-path: "fonts/";

How to position bootstrap glyphicon on top of another absolute positioned div

You may put the Span outside of the the Div and it will work fine with your absolute positioning! :)

Bootstrap 3 Glyphicons are not working

I was looking through this old question of mine and since what was supposed to be the correct answer up until now, was given by me in the comments, I think I also deserve the credit for it.

The problem lied in the fact that the glyphicon font files downloaded from bootstrap's customizer tool were not the same with the ones that are downloaded from the redirection found at bootstrap's homepage. The ones that are working as they should are the ones that can be downloaded from the following link:

http://getbootstrap.com/getting-started/#download

Anyone having problems with old bad customizer files should overwrite the fonts from the link above.

Overlap Notification Badge on Glyph in Bootstrap 3