Question

我想在bootstrap徽章的顶部显示glyphicon。

任何人都可以共享css。

我需要将glyphicon放置在徽章顶部，如下所示

PS：我需要字形（在徽章的上角）

这是代码

＆＃13;

<!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>

＆＃13;

Answer 1

您可以尝试以下css。

这对我有用

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

Answer 2

试试这个

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 3

请尝试以下

＆＃13;

.group .glyphicon.glyphicon-time {
    left: 33px;
    position: absolute;
    top: 4px;
}
.group .badge {
    margin-top: 10px;
   position: relative;
}
.group{ }

＆＃13;

<!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>

＆＃13;

Answer 4

您也可以尝试使用此代码，结果将显示为

<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>

Answer 5

试试这个：

＆＃13;

.glyphicon{
     top: 24px !important;
    font-size: 31px;

}
.badge {
margin-left: -10px;
background-color: #E91E63 !important;
}

＆＃13;

<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>

＆＃13;

如何在html中的bootstrap徽章顶部使用glyphicon

5 个答案: