Adding styles to font awesome icons

Problem

Below is what I tried.

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

This actually creates the icon, but i am not sure how to bring that green color over there on right corner.

Problem courtesy of: theJava

Solution

You can use :after pseudo-element to add the triangle:

.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;
}

See demo fiddle

Tip: Look up "CSS triangles" to get a grip on that

Solution courtesy of: koala_dev

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.