Comment combiner des triangles font-awesome et CSS ?

Question

J'essaie de créer une solution générique pour ajouter des triangles aux icônes de polices géniales.J'ai une démo fonctionnelle de mon code ici : http://jsfiddle.net/remisture/2gG6d/5/

Mais ce n'est pas très élégant et flexible, car le code contient à la fois des tailles de police et des marges en valeurs en pixels.Ce serait parfait si la taille et l'emplacement du triangle sont générés en fonction de la taille de la police du parent, et bien sûr prennent également en charge les classes "fa-2x" - "fa-5x" de font-awesome : http://fontawesome.io/examples/

Toute aide serait grandement appréciée.

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

J'ai apporté quelques modifications à votre CSS afin d'arriver au comportement souhaité.Les triangles sont dimensionnés et positionnés en fonction de la taille de police des parents.Ce n'est pas parfait au pixel près, mais vous devriez avoir une idée et pouvoir la peaufiner.

Le but est d'utiliser uniquement des valeurs em ou pourcentage pour positionner les triangles et définir la largeur de la bordure.

DÉMO (J'ai également simplifié la feuille de style pour qu'elle soit plus facile à modifier)

Après cela, vous pouvez ajouter de nouvelles classes avec d'autres valeurs de largeur de bordure et de positionnement pour les autres classes que vous souhaitez prendre en charge (fa-2x-fa-5x).

CSS pertinent :

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