How to combine font-awesome and CSS triangles?

Question

I'm trying to make a generic solution for adding triangles to font-awesome icons. I have a working demo of my code here: http://jsfiddle.net/remisture/2gG6d/5/

But this is not very elegant and flexible, as the code contains both font sizes and margins in pixel values. It would be perfect if the size and placement of the triangle are generated based on the parent's font size, and of course also support font-awesome's "fa-2x"-"fa-5x" classes: http://fontawesome.io/examples/

Any help would be greatly appreciated.

HTML

<div class="triangle"> 
   <i class="fa fa-plus-square"></i>
</div>

CSS

.triangle {
    font-size: 30px;
    position: relative;
    border: none;
    width: 40px;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    color: #68aaa9;
}
.triangle:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    border-top-color: #68aaa9;
    border-width: 5px;
    margin-left: -5px;
    margin-top: -6px
}

Answer 1

I made some changes to your CSS in order to get to the desired behaviour. The triangles are sized and positioned according to the parents font size. This isn't pixel perfect but you should get the idea and be able to tweak it.

The point is to use only em or percent values to position the triangles and set the border-width.

DEMO (I also simplified the stylesheet so it is easier to tweak)

After this, you can add new classes with other values of border-width and positioning for the other classes you want to support (fa-2x-fa-5x).

Relevant CSS :

.triangle {
    position: relative;
    border: none;
    display: inline-block;
    color: #68aaa9;
    line-height:1em;
}
.triangle:after {
    content:" ";
    position: absolute;
    height: 0;
    width: 0;
    border: 0.18em solid transparent;
}
.triangle.triangle-bottom:after {
    top: 90%;
    right:0.268em;
    border-top-color: currentColor;
}
.triangle.triangle-top:after {
    bottom: 0.95em;
    left:0.268em;
    border-bottom-color: currentColor;
}
.triangle.triangle-left:after {
    right: 100%;
    top: 0.268em;
    border-right-color: currentColor;
}
.triangle.triangle-right:after {
    left: 100%;
    top: 0.268em;
    border-left-color: currentColor;
}