将一个圆圈移到字体 awesome bell 的右上角

Question

我有一个字体很棒的铃铛，我正在尝试让铃铛出现在铃铛的右上角。这是我想要在 paint.NET 中制作的示例 https://gyazo.com/2d74f611e2df81362bc3f2e946f9d747

这是我目前尝试过的方法：

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

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

但这会将铃放在左侧。我试过 :before 但它只是让它消失了。

提前致谢。

Answer 1

尝试使用 :after 而不是 :before，因为 font-awesome 使用 :before 来显示实际的字体图标

Answer 2

将 position: relative; 放入 <i> 标签，然后在您的 CSS 中添加：

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

将一个圆圈移到字体 awesome bell 的右上角

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

html

css

font-awesome