フォントの素晴らしい右端に円を移動

Question

フォントの素晴らしいベルがあり、ベルの右上にベルを表示しようとしています。

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

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

をしかし、これは上の鐘を置く：ここに は、私がpaint.NET にhttps://gyazo.com/2d74f611e2df81362bc3f2e946f9d747

を作り、ここで私はこれまで試してみました何で何をしたいの例です。左側。私は試しました：前にしかしそれはちょうどそれを消えさせました。

ありがとうございます。

Answer 1

は<i> -tagにposition: relative;を入れて、あなたのCSSの追加中：

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

を

Answer 2

試してみてください。後の代わりに：前に、フォント素晴らしい使用しているため：実際のフォントアイコンを表示する前に