Lo reconozco, me encantan los iconos de FontAwesome, un juego de iconos que ya viene de casa en frameworks como bootstrap. Me gusta porque todos los iconos están muy cuidados y resuelve un gran problema que teníamos en el desarrollo y maquetación web: trocear mini imágenes e insertarlas como fondo en el css, para señalar, guiar al usuario, y mostrarle información visual. Además al ser el tratamiento de estos iconos como tipografía cambiar el color, su tamaño, o cualquier otra perrería que se nos ocurra, se puede hacer facilmente con pocas líneas de código, pero por contra hay que pagar un precio. ¡Códigos web más sucios!, al menos en su forma CSS original.
El problema de FontAwesome es <i>
Me parece bastante sucia la forma en la que se han de insertar los iconos. Cuando pasamos de tablas a divs, en el gremio nos quejábamos de la divitis, y en este momento con el auge de frameworks como bootstrap, nos podríamos quejar de códigos html sucios, repletos de botones vacios, repletos de <i> con estlilo que no aportan información semántica y que pueden ser una barrera en búsqueda de la accesiblidad o de maquetar/diseñar un sitio web con menos código html.
Por ejemplo, en una lista, usando la tipografía awesome, para insertar un icono en forma de flecha para destacar algún elemento deberíamos de insertar un <i> </i> que no hace nada y ocupa mucho espacio.
<ul id="menu"> <li><i class="fa fa-caret-right"></i> Item destacado</li></ul>
En concreto <i class=“fa fa-caret-right”></i> son 33bytes de información vacia para pintar una flecha. Si usamos en una pantalla 10 veces ese <i> puede que acabe pesando más que nuestro .png o su parte proporcional en el sprite de imágenes de la hoja de estilos css.
Las soluciones para evitar este tipo de malas prácticas usando la fuente Font-Awesome y sus recursivos <i></i> requiere deconstruir el css de font-awesome y quedarnos con las partes y los content que nos interesen, lo que es lo mismo, definir lo siguiente en nuestro css (del ejemplo):
#menu li:before { font-family: FontAwesome; content: "f0da"; } Conclusión: la propiedad CSS content: debería permitir la inclusión de código HTML.
Ya ha salido la versión de FA, tiene una versión free y otra de pago, por supuesto la free se queda corta
y ahora se requiere JS!!! los iconos por lo menos están construidos en un grid y no están hecho cada uno de su padre y de su madre .
Pero lo peor es que siguen usando la etiqueta !!