style content caracter estraño que representa una imagen

[OssoH]

Es algo que he encontrado en varias web y quisiera por curiosidad saber el motivo de porque hacerlo de esta forma y cómo hacerlo.

Por ejemplo : http://www.nethercottconstructions.com/es/modulos-prestashop/15-ajax-desplegables-categorias.html

Si entrais y accedeis por firebus a la imagen del carrito del boton de la derecha de compra. aparece este codigo :

Código [Seleccionar] Expandir


.box-info-product .exclusive:before {
    border: 1px solid #06B2E6;
    border-radius: 5px 0 0 5px;
    bottom: 0;
    color: #FFFFFF;
    content: "";
    font-family: "FontAwesome";
    font-size: 25px;
    left: 0;
    line-height: 47px;
    position: absolute;
    text-align: center;
    text-shadow: 0 1px #015883;
    top: 0;
    width: 51px;
    z-index: 2;
}


El style content va acompañado de un simbolo raro que hace mostrar la imagen del carrito. ¿esto significa que el jpg de esa imagen no existe en la web? ¿como se logra esto? ¿esta técnica tiene algún nombre? ¿Que sentido tiene hacerlo de esta forma en vez de poner la url de la imagen? 

Gracias.
Un saludo.

[#!drvy]

Son fuentes.

http://fortawesome.github.io/Font-Awesome/
http://fortawesome.github.io/Font-Awesome/icons/

Tiene muchas ventajas. Ahorras recursos, lo pueden leer dispositivos que no procesan imágenes (lectores), es adaptable (responsive), no tienes que lidiar con las pantallas retina.. etc.

Saludos

[OssoH]

Muchas gracias por la aclaración. 

Entiendo que la parte negativa de usar este tipo es el hecho de cargar la fuente js y el tiempo de procesarlas.

Es como por ejemplo el hacer uso de fuente de google (u otros). Es más rápido la carga de la web el usar fuentes standars (por ejemplo arial) que usar fuentes comerciales.

Gracias.

[#!drvy]

Entiendo que la parte negativa de usar este tipo es el hecho de cargar la fuente js y el tiempo de procesarlas.

No hay ningún JS, solo los archivos de la fuente y el CSS.

Es como por ejemplo el hacer uso de fuente de google (u otros). Es más rápido la carga de la web el usar fuentes standars (por ejemplo arial) que usar fuentes comerciales.

Si pero el impacto es mínimo (hablamos de mili-segundos) y con un buen cache te sale mejor que hacerlo con imágenes.

Saludos

[OssoH]

Excelente.
Muchas gracias.