Move a circle to the top right of a font awesome bell

Question

I have got a font-awesome bell and I am trying to make a bell appear on the top right of the bell. Here is an example of what I want made in paint.NET https://gyazo.com/2d74f611e2df81362bc3f2e946f9d747

And here is what I have tried so far:

.notification {
 background: red;
 border-radius: 50%;
 border: 1px solid red;
 height: 8px;
 width: 8px;
 position: relative;
}

<i class='fa fa-bell notification'></i>

But this puts the bell on the left side. I tried :before but it just made it disappear.

Thank you in advance.

score 4 · Accepted Answer · answered Oct 11 '16 at 19:43

Put position: relative; to the <i>-tag and then in your CSS add:

.notification:after {
    content: "";
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    background: red;
    top: 0;
    right: 0;
    border-radius: 50%;
}

score 1 · Answer 2 · answered Oct 11 '16 at 19:37

1

Try :after instead of :before, because font-awesome uses :before to display the actual font icon

answered Oct 11 '16 at 19:37

Aniko Litvanyi

2,109
1
21
25

Move a circle to the top right of a font awesome bell

2 Answers2