如何在html中的引導徽章上使用glyphicon

-1

我想在引導徽章的頂部顯示glyphicon。如何在html中的引導徽章上使用glyphicon

任何人都可以共享相同的CSS。

我需要glyphicon在徽章的頂部被放置等給出下面

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

下面是代碼

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

來源

2016-09-28 vishal shah

你當前的代碼？ –

你有沒有試過字體真棒 –

把你的代碼更澄清 –

試試這個

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

來源

2016-09-28 10:53:06

這就是我正在尋找..但它顯示方形字形..我需要圓字形 –

更新'snippet'，檢查一次 –

謝謝@Abhishek ..工作 –

試試這個下面

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

來源

2016-09-28 10:54:36 Dhaarani

謝謝你回答@dhaarani ...但這不是我所需要的......我需要在徽章頂部顯示標誌符號 –

你也可以試試這個代碼和結果看起來就像這樣

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

來源

2016-09-28 10:56:35 Rahul

試試這個：

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

來源

2016-09-28 10:57:36 Abhishek

你可以試試下面的CSS。

這是爲我工作

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

來源

2016-09-28 12:14:22 shital

如何在html中的引導徽章上使用glyphicon

回答

相關問題