Question

我正在尝试使通知徽章正常工作，我快要到了：）

当我有通知徽章时，它会很好地工作，但是如果我将其删除，图标会由于某种原因掉落，我不知道为什么。

.icon-badge-group .icon-badge-container {
  display: inline-block;
  margin-left: 15px;
}

.icon-badge-group .icon-badge-container:first-child {
  margin-left: 0
}

.icon-badge-container {
  margin-top: 20px;
  position: relative;
}

.icon-badge-icon {
  font-size: 30px;
  position: relative;
}

.icon-badge {
  background-color: red;
  font-size: 12px;
  color: white;
  text-align: center;
  width: 20px;
  height: 20px;
  border-radius: 35%;
  position: relative;
  top: -35px;
  left: 17px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/>
<div class="container">
  <div class="icon-badge-container">
    <i class="far fa-envelope icon-badge-icon"></i>
    <div class="icon-badge">6</div>
  </div>
  <div class="icon-badge-container">
    <i class="far fa-user icon-badge-icon"></i>
    <div class="icon-badge">6</div>
  </div>

  <div class="icon-badge-group">
    <div class="icon-badge-container">
      <i class="far fa-envelope-open icon-badge-icon"></i>
      <div class="icon-badge">6</div>
    </div>
    <div class="icon-badge-container">
      <i class="far fa-user icon-badge-icon"></i>
    </div>
    <div class="icon-badge-container">
      <i class="far fa-user icon-badge-icon"></i>
      <div class="icon-badge">6</div>
    </div>
  </div>

Answer 1

您的工作做得非常好，唯一需要更改的是职位从relative到absolute。更改此设置后，徽章将停止与其他元素的流/布局位置互动，并将成为icon-badge-container元素的一种“顶层”。

其他内联块元素icon-badge-container将不再为您的徽章所困扰。

我用注释标记了CSS，更改了哪些行。

有关职位的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/position

.icon-badge-group {
 
}

.icon-badge-group .icon-badge-container {
    display: inline-block;
    margin-left:15px;
}

.icon-badge-group .icon-badge-container:first-child { 
  margin-left:0
}

.icon-badge-container {
    margin-top:20px;
    position:relative;
}

.icon-badge-icon {
    font-size: 30px;
    position: relative;
}

.icon-badge {
    background-color: red;
    font-size: 12px;
    color: white;
    text-align: center;
    width:20px;
    height:20px;
    border-radius: 35%;
    position: absolute; /* changed */
    top: -5px; /* changed */
    left: 18px; /* changed */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">


<div class="icon-badge-group">
    <div class="icon-badge-container">
        <i class="far fa-envelope-open icon-badge-icon"></i>
        <div class="icon-badge">6</div>
    </div>
    <div class="icon-badge-container">
        <i class="far fa-user icon-badge-icon"></i>
    </div>
    <div class="icon-badge-container">
        <i class="far fa-user icon-badge-icon"></i>
        <div class="icon-badge">6</div>
    </div>
</div>

Answer 2

那是因为位置relative使其为absolute以便一直没有影响图标

.icon-badge-group .icon-badge-container {
  display: inline-block;
  margin-left: 15px;
}

.icon-badge-group .icon-badge-container:first-child {
  margin-left: 0
}

.icon-badge-container {
    margin-top: 20px;
    position: relative;
    display: inline-block;
}

.icon-badge-icon {
  font-size: 30px;
  position: relative;
}

.icon-badge {
    background-color: red;
    font-size: 12px;
    color: white;
    text-align: center;
    width: 20px;
    height: 20px;
    border-radius: 35%;
    position: absolute;
    top: -12px;
    right: -10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/>
<div class="container">
  <div class="icon-badge-container">
    <i class="far fa-envelope icon-badge-icon"></i>
    <div class="icon-badge">6</div>
  </div>
  <div class="icon-badge-container">
    <i class="far fa-user icon-badge-icon"></i>
    <div class="icon-badge">6</div>
  </div>

  <div class="icon-badge-group">
    <div class="icon-badge-container">
      <i class="far fa-envelope-open icon-badge-icon"></i>
      <div class="icon-badge">6</div>
    </div>
    <div class="icon-badge-container">
      <i class="far fa-user icon-badge-icon"></i>
    </div>
    <div class="icon-badge-container">
      <i class="far fa-user icon-badge-icon"></i>
      <div class="icon-badge">6</div>
    </div>
  </div>

Answer 3

您需要再添加一行CSS代码，诸如此类：

.icon-badge-group .icon-badge-container{
    vertical-align: top;
}

如何在图标上放置通知徽章？

3 个答案: