エンジニアとしての市場価値を測りませんか?PR

企業からあなたに合ったオリジナルのスカウトを受け取って、市場価値を測りましょう

2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at
スクリーンショット 2019-05-28 10.30.57.png 通知があった時に右上に通知マークを表示するカスタマイズについて。
<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を追加すればいいですね。

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Qiita Advent Calendar is held!

Qiita Advent Calendar is an article posting event where you post articles by filling a calendar 🎅

Some calendars come with gifts and some gifts are drawn from all calendars 👀

Please tie the article to your calendar and let's enjoy Christmas together!

2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?