¿Cómo combinar los triángulos de fuentes increíbles y CSS?

Question

Estoy tratando de hacer una solución genérica para agregar triángulos a los iconos de fuentes increíbles.Tengo una demostración de trabajo de mi código aquí: http://jsfiddle.net/remisture/2gg6d/5/

Pero esto no es muy elegante y flexible, ya que el código contiene tanto tamaños de fuente como márgenes en valores de píxeles.Sería perfecto si el tamaño y la colocación del triángulo se generan en función del tamaño de la fuente de los padres, y, por supuesto, también admiten las clases "FA-2X" de "FA-2X" de Font-Awesome: "FA-5X": http://fontawesome.io/examples/

Cualquier ayuda sería muy apreciada.

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

Hice algunos cambios en su CSS para llegar al comportamiento deseado.Los triángulos son de tamaño y posicionados de acuerdo con el tamaño de la fuente de los padres.Esto no es píxel perfecto, pero deberías tener la idea y poder modificarlo.

El punto es usar solo los valores de EM o porcentaje para colocar los triángulos y establecer el ancho de borde.

Demo (también simplificé la hoja de estilo para que seaMás fácil de ajustar)

Después de esto, puede agregar nuevas clases con otros valores de ancho de borde y posicionamiento para las otras clases que desea admitir (fa-2x-GeneracodiCodeGode).

CSS relevantes:

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