Question

我有一个带铃铛图标的导航。我想在Icon的右上角添加一个包含数字的徽章（就像在几个Android应用程序中一样）。我找到了一些博客来完成这个添加css中的数字，但我需要在服务器端添加数字，所以做这样的事情：

contact_no

会更好。

布局到目前为止看起来像这样：

<span>$number</span>

Answer 1

FontAwesome在他们的文档中有这个。

查看https://fontawesome.com/how-to-use/svg-with-js并找到 Layering，Text，＆amp;计数器

带有JS的SVG要求您使用FontAwesome的JS版本。最新的CDN链接可以在这里找到：https://fontawesome.com/get-started/svg-with-js

<span class="fa-layers fa-fw" style="background:MistyRose">
    <i class="fas fa-bell"></i>
    <span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>`

您可以使用以下类定位计数器： fa-layers-bottom-left，fa-layers-bottom-right，fa-layers-top-left和默认fa-layers-top-right

Answer 2

你可以尝试一下，让我知道这是不是你想要的

<i class="fas fa-bell badge-wrapper">
  <span class='badge badge-secondary'>21</span>
</i>

风格

.badge-wrapper {
     position: relative;
 }

 .badge {
     position: absolute;
     top: 0;
     right: -5px;
     display: inline-block;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background-color: #ddd;
 }

Answer 3

最喜欢的佩萨南 2通知

.badge {
  position: absolute;
  font-size: xx-small;
  margin-left: -5px;
  margin-top: -10px;
  background-color: var(--orange);
  color: white;
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> 
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <ul class="navbar-nav ml-auto">
    <li class="nav-item mr-3">
      <a href="" class="font-weight-bolder text-success nav-link"><i class="fa fa-bell"><span class='badge badge-pill'>2</span></i> Notification</a>
    </li>
  </ul>
  <h1>Hello, world!</h1>
  
</body>

</html>

Bootstrap字体真棒徽章与数字

3 个答案: