fontAwesomeのアイコンにバッジをつける方法

通知があった時に右上に通知マークを表示するカスタマイズについて。

<i class="fas fa-bell badge"></i>

badgeというclassを設定します。

あとはCSSを追加。

css

.fa-bell{
  position: relative;
}

.badge:after{
  content:"";
  position: absolute;
  background: #fff;
  height:6px;
  width:6px;
  top:-2px;
  right:-5px;
  text-align: center;
  border-radius: 50%;
  color:white;
}

通知があった時だけ、badgeを追加すればいいですね。