添加样式到字体真棒图标

Question

以下是我的尝试。

<i class="fa fa-2x fa-border fa-user"></i>

这实际上会创建图标，但我不确定如何将green color带到右上角。

Answer 1

您可以使用:after伪元素添加三角形：

.fa-user {
    position: relative;
}
.fa-user:after {
    content:'';
    position: absolute;
    top: 0;
    right: 0;
    border-style: solid;
    border-width: 0 12px 12px 0;
    border-color: transparent lightgreen transparent transparent;
}

参见 demo fiddle

提示：查找“CSS三角形”以掌握该